:root {
	--map-background: #f0f1f3;
	--accent: #265ebb;
	--text: #47494c;
}

html,
body {
	color: var(--text);
	background-color: var(--map-background);
	overflow: hidden;
	overscroll-behavior: none;
}
body {
	--md-outlined-text-field-container-shape: 60px;
}
b {
	font-weight: bold;
}
.material-symbols-rounded {
	font-family: "Material Symbols Rounded", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
}

.material-symbols-filled-bold-48pt {
	font-family: "Material Symbols Rounded Filled", sans-serif;
	font-weight: 700;
	font-size: 48px;
}

.map {
	position: relative;
	background: #f4f0ef;
}
.map .holder {
	position: relative;
	overflow: hidden;
	touch-action: none;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	touch-action: none;
}

.map .resource {
	width: 100vw;
	height: 100vh;

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

.map .holder .resource svg {
	/*width: 100%;
	height: auto;*/

	/*will-change: transform;*/

	pointer-events: all;
	width: 100vw;
	height: auto;

	--scale-value: 1;
	--translate-x: 0px;
	--translate-y: 0px;
	--skey-x: 0deg;
	--skey-y: 0deg;

	/*--skey-x: 45deg;
	--skey-y: -20deg;*/
	--rotate: 0;

	transform-origin: center center;

	transform: translate(var(--translate-x, 0px), var(--translate-y, 0px))
	scale(var(--scale-value, 1)) skew(var(--skey-x), var(--skey-y));
	touch-action: none;
	user-select: none;

	cursor: grab;
}

.map .holder div > * {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.map .holder div {
	/*padding: 2000px;*/
}

.map .top-bar {
	position: absolute;
	background-color: var(--map-background);
	top: 0px;
	left: 0px;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	gap: 30px;
	align-items: center;
	padding: 10px;
	z-index: 2;
}

.top-bar .title h1,
.top-bar .title h2 {
	font-weight: bold;
}

.search {
	padding: 10px 10px 0px;
	position: relative;
}

.info .target,
.info .start {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 2px;
}

.target .circle,
.start .circle {
	display: inline-block;
	height: 12px;
	width: 12px;
	border-radius: 50%;
	background-color: transparent;
}

.target .circle {
	background-color: #ffc300;
}

.start .circle {
	background-color: #4288f0;
}

svg .highlight-target *,
svg .highlight-target{
	fill: white;

	animation: highlightTarget 1200ms ease infinite;
}

svg .highlight-start-building *,
svg .highlight-start-building {
	fill: white;

	animation: highlightStartBuilding 1200ms ease infinite;
	animation-delay: 600ms;
}

@keyframes highlightTarget {
	0% {
		fill: white;
	}

	80% {
		fill: #ffc300;
	}

	100% {
		fill: #ffc300;
	}
}

@keyframes highlightStartBuilding {
	0% {
		fill: white;
	}

	80% {
		fill: #4288f0;
	}

	100% {
		fill: #4288f0;
	}
}

.hud {
	position: relative;
	height: 100vh;
	width: 100vw;
	z-index: 2;
}

.location-info {
	position: fixed;

	top: 200px;

	left: 10px;

	max-width: 300px;

	width: 100%;

	background-color: white;

	border-radius: 15px;

	z-index: 2;
	cursor: pointer;
	padding: 10px;

	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.target-info {
	position: absolute;
	left: 30px;
	top: 100px;
	height: auto;
	width: auto;
	border: 1px solid #79747e;
	background-color: white;
	border-radius: 15px;
}

.target-info div {
	padding: 10px 15px;
}

.target-info div {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 5px;
}
.location-info .location-map {
	display: flex;
	justify-content: center;
	align-items: center;
}

.location-info .location-map svg {
	width: 100%;
	height: auto;
}

.location-info .info {
	text-align: left;
}

/*.location-info .info .location {
	display: flex;
	flex-wrap: wrap;
	column-gap: 5px;
	justify-content: flex-start;
}*/

.location-info .info .location * {
	display: inline;
	word-break: break-word;
}

.location-info .info .location span {
	vertical-align: text-bottom;
	max-width: 16px;
	display: inline-block;
}

.location-info .info .location:not(:last-of-type) {
	margin-bottom: 0px;
}
.location-info .info .location p {
	font-weight: 300;
}
.location-info .info .location p,
.location-info .info .location span {
	line-height: 1.2;
}
.location-info .info .location span {
	font-size: 16px;
	font-weight: 500;
}

.location-info {
	text-align: center;
}
.search-list .supporting-text p {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 3px;
	font-size: 14px;
	line-height: 1;
	font-weight: 300;
}
.search-list .headline {
	font-size: 16px;
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: 0.5px;
	margin-bottom: 3px;
	text-align: left;
}
.search-list .supporting-text p span {
	opacity: 0.3;
	font-size: 20px;
}

svg circle.st8,
svg ellipse.st8,
svg path.st8,
svg circle.st7,
svg ellipse.st7,
svg path.st7 {

	fill: transparent;
}

svg circle.start{
	fill: transparent;
}

svg circle.highlight-start,
svg ellipse.highlight-start,
svg path.highlight-start {
	transform-origin: unset;
	fill: green;
	animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
	0% {
		transform: scale(1), ;
		fill: rgba(67, 139, 236, 0);
	}
	80% {
		transform: scale(4);
		fill: rgba(67, 139, 236, 0.8);
	}

	100% {
		transform: scale(3);
		fill: rgba(67, 139, 236, 0);
	}
}
.location-info .info .location:not(:last-of-type) {
	margin-bottom: 15px;
}
.location-info .info .location {
	line-height: 1.3;
}
.location-info .info .location p,
.location-info .info .location span {
	font-size: 16px;
	line-height: 1.3;
}

.copyright {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(15px);
	padding: 5px 10px;
	border-radius: 15px 0px 0px 0px;
}

.copyright p {
	font-size: 14px;
}

.copyright a {
	color: var(--accent);
	text-decoration: none;
}

@media screen and (min-width: 769px) {
	.search-widget {
		max-width: 320px;
	}
}
@media screen and (max-width: 768px) {
	.location-info.show {
		transform: translateX(-50%);
		bottom: 40px;
	}

	.location-info {
		bottom: calc((var(--location-height)) * -1 / 2);
		top: unset;
		left: 50%;
		max-width: calc(100% - 20px);
		transform: translateX(-50%);
		transition: all 300ms ease;
		min-height: 150px;
	}

	.location-info .location-map svg {
		height: auto;
		width: 100%;
	}

	.location-info:focus-within {
		bottom: calc(100vh - var(--location-height) - 60px);
		transition: all 300ms ease;
	}

	.location-info .location-map {
		padding: 0px;
	}

	.location-info .info .location p,
	.location-info .info .location span {
		font-size: 14px;
		line-height: 1.2;
	}

	.location-info .info .location span {
		vertical-align: middle;
	}

	.location-info .info {
		flex: 60%;
	}

	.location-info .location-map {
		flex: 35%;
	}

	.location-info .info .location {
		line-height: 1.2;
	}

	.copyright p {
		font-size: 13px;
	}
}

.logo img {
	height: 50px;
	width: auto;
}

.top-bar .title .logo {
	display: flex;
	justify-content: center;
	align-items: center;
}

.location-info .info-btn {
	padding-bottom: 10px;
}
.location-info .info-btn {
	display: flex;
	justify-content: center;
	align-items: center;
}
.location-info .info-btn p {
	background-color: var(--map-background);
	padding: 5px 15px;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 3px;
	border-radius: 15px;
}

.search-list {
	position: absolute;
	width: calc(100% - 10px);
	--md-list-container-color: white;

	border-radius: 30px 30px 30px 30px;
	max-height: 350px;
	padding-top: 65px;
	overflow-y: scroll;

	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}


svg text,
svg text tspan{
font-family: inherit !important;
}

svg text > tspan.map-label-text{
font-size: 22px;
font-weight: 300;
}


svg text > tspan.map-label-text-small{
font-size: 13px;
font-weight: 300;
}




svg circle.st9,
svg ellipse.st9 {
	display: none;
}

.main-menu {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 3;
}

#search-input {
	width: 100%;

	--md-filled-text-field-container-shape: 60px;
	--md-filled-text-field-container-color: white;
	--md-filled-text-field-focus-active-indicator-color: var(--accent);

	--md-filled-text-field-indicator-color: transparent;
	--md-filled-text-field-focus-indicator-color: transparent;
	--md-filled-text-field-hover-indicator-color: transparent;
	--md-filled-text-field-disabled-indicator-color: transparent;
	--md-filled-text-field-error-indicator-color: transparent;
	--md-filled-text-field-indicator-height: 0px;

	--md-filled-text-field-label-text-font: "Lexend Deca";
	--md-filled-text-field-input-text-font: "Lexend Deca";
	--md-filled-text-field-supporting-text-font: "Lexend Deca";
}

md-list-item {
	--md-list-item-label-text-font: "Lexend Deca";
	--md-list-item-supporting-text-font: "Lexend Deca";
}

#search-container .material-symbols-rounded {
	color: var(--accent);
}