:root {
	--app-height: 100vh;
}

html, body {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-text-size-adjust: 100%;
    position: fixed;
    top: 0;
    /* bottom: 0; */
    left: 0;
    /* right: 0; */
	width:100%;
    overflow: hidden;
	/* height:var(--app-height); */
    margin: 0;
}

.fullscreen {
	height:var(--app-height);
}
/* @supports (height:100dvh) {
	.fullscreen {
		height:100dvh;
	}
} */
body {
	color: #333;
	margin: 0;
  box-sizing: border-box;
  font-size: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

button {
	color: #333;
	background-color: #f4f4f4;
  outline: none;
  margin:0;
  padding:0;
  /* padding-left:1rem;
  padding-right:1rem; */
  cursor: pointer;
}

button:disabled {
	color: #999;
}

/* button:not(:disabled):active {
	background-color: #ddd;
} */

button:focus {
	border-color: #666;
}

.crosslabel {
	text-shadow: 0px 0px 3px #fff, 0px 0px 3px #fff;
  font-size: 22px;
  color:#0080ff;
  pointer-events: none;
}

.axis-label {
	color:#ebebeb;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding-right:16px;
}

.bubble {
	background-color:#707070;
	color:white;
	border-radius: 5px;
}

.mapboxgl-popup {
	z-index: 1 !important;
	max-width: 500px !important;
	border-radius:3px !important;
}

.mapboxgl-popup-content {
	white-space: pre-line !important;
	padding:0 !important;
	width:360px !important;
	max-height: 390px !important;
    overflow: scroll !important;
	border-radius: 5px !important;
    box-shadow: 0px -2px 12px rgb(255 255 255 / 10%) !important;
}

.mapboxgl-popup-close-button {
	color:white !important;
	right:4px !important;
}

.colorbar-image {
	width:200px;
}

/* .mapboxgl-popup-tip {
	border-top-color: #111 !important;
	border-bottom-color: #111 !important;
	
	border-left-color: #111 !important;
} */

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
	border-right-color: #f9f9f9 !important;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
	border-left-color: #f9f9f9 !important;
}

.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
	border-bottom-color: #f9f9f9 !important;
	transform: translate(0px, 4px);
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
	border-bottom-color: #f9f9f9 !important;
}

.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
	border-bottom-color: #f9f9f9 !important;
	transform: translate(0px, 4px);
}

.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
	border-top-color: #f9f9f9 !important;
	transform: translate(0px, -4px);
}
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
	border-top-color: #f9f9f9 !important;
	transform: translate(0px, -4px);
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
	border-top-color: #f9f9f9 !important;
}

.circle-outline {
    width:10px;
    height:10px;
    border: 2px solid white;
    border-radius: 50%;
}

.flex {
	display:flex !important;
}

.jet {
	font-family: "JetBrains Mono", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}