:root {
	--black: #101820;
	--lightColor: #F5F6F7;
	--white: #FFF;
	--green: #00E1B4;
	--locationPulseColor: #A7C9F1;
	--locationColor: #235BDC;
	--busColorLight: #E5FCF7;
	--trolleybusColorLight: #ECF5FF;
	--tramColorLight: #FFF6EC;
	--trainColorLight: #FFF0EB;
	--fontMain: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", "Arial", sans-serif;
	--gapMobile: 5vw;
	--marginMobile: 8vw;
	--boxRadiusMobile: 2vw;
	--squareButtonPaddingMobile: 5vw;
	--tablePaddingMobile: 5vw;
	--pillButtonPaddingMobile: 7vw;
	--statusMobile: 3vw;
	--checkboxMobile: 7vw;
	--checkboxBorderMobile: 1.5vw;
	--titleMobile: 9vw;
	--bodyMobile: 4vw;
	--buttonMobile: 4vw;
	--welcomeIconMobile: 9.5vw;
	--gapLandscape: 5vh;
	--marginLandscape: 8vh;
	--boxRadiusLandscape: 2vh;
	--squareButtonPaddingLandscape: 5vh;
	--tablePaddingLandscape: 5vh;
	--pillButtonPaddingLandscape: 6vh;
	--statusLandscape: 3vh;
	--checkboxLandscape: 7vh;
	--checkboxBorderLandscape: 1.5vh;
	--titleLandscape: 8vh;
	--bodyLandscape: 3.5vh;
	--buttonLandscape: 3.5vh;
	--welcomeIconLandscape: 7vh;
	--gapDesktop: 4vh;
	--marginDesktop: 8vh;
	--boxRadiusDesktop: 2vh;
	--squareButtonPaddingDesktop: 5vh;
	--tablePaddingDesktop: 3vh;
	--pillButtonPaddingDesktop: 5vh;
	--statusDesktop: 2vh;
	--checkboxDesktop: 5vh;
	--checkboxBorderDesktop: 1vh;
	--titleDesktop: 8vh;
	--bodyDesktop: 3vh;
	--buttonDesktop: 3vh;
	--welcomeIconDesktop: 7vh;
	--locationIcon: 40px;
	--maxWidth: 1920px
}

@font-face {
	font-family: "DM Sans";
	src: url(font/DMSans-Regular.woff2) format("woff2");
	font-weight: 500;
	font-display: swap
}

@font-face {
	font-family: "DM Sans";
	src: url(font/DMSans-Medium.woff2) format("woff2");
	font-weight: 600;
	font-display: swap
}

@font-face {
	font-family: "DM Sans";
	src: url(font/DMSans-SemiBold.woff2) format("woff2");
	font-weight: 700;
	font-display: swap
}

.popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	box-shadow: 0 0 0 100vw rgba(16, 24, 32, .5);
	z-index: 1000;
	max-width: 80%;
	flex-direction: column
}

.popup-buttons {
	display: flex;
	white-space: nowrap
}

.popup-buttons button {
	border: none;
	cursor: pointer;
	width: 100%
}

.popup h2,
.popup p {
	margin-block: 0;
	line-height: 1.2
}

#cancel-location {
	background-color: var(--lightColor)
}

#allow-location {
	background-color: var(--black);
	color: #fff
}

.stop-marker {
	z-index: 1
}

.vehicle-marker {
	z-index: 2
}

.user-marker {
	width: var(--locationIcon);
	height: var(--locationIcon);
	position: relative;
	z-index: 3
}

.user-marker-pulse {
	width: 100%;
	height: 100%;
	background-color: var(--locationPulseColor);
	border-radius: 50%;
	position: absolute;
	animation: pulse 5s infinite
}

.user-marker-center {
	width: calc(var(--locationIcon)/ 3);
	height: calc(var(--locationIcon)/ 3);
	background-color: var(--locationColor);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 calc(var(--locationIcon)/ 24) #fff, 0 0 0 calc(var(--locationIcon)/ 12) rgba(0, 0, 0, .1)
}

@keyframes pulse {
	0% {
		transform: scale(0);
		opacity: 1
	}

	100% {
		transform: scale(1.5);
		opacity: 0
	}
}

.heading-indicator {
	z-index: -1
}

.maplibregl-popup {
	z-index: 4
}

#track-button-controller {
	pointer-events: none
}

#track-button-container {
	pointer-events: auto
}

body {
	font-family: var(--fontMain);
	margin: 0;
	display: flex;
	justify-content: center
}

.view,
body,
html {
	min-height: 100dvh
}

.view {
	width: 100%;
	max-width: var(--maxWidth)
}

.maplibregl-popup-tip {
	display: none
}

.maplibregl-popup-content {
	background: #fff !important;
	color: var(--black);
	border-radius: 100vh !important;
	font-family: var(--fontMain) !important;
	font-weight: 600;
	width: fit-content
}

.route-bubble {
	line-height: 0;
	white-space: nowrap
}

.titleText {
	color: var(--black);
	font-weight: 600;
	line-height: 1
}

.bodyText {
	color: var(--black);
	font-weight: 500;
	line-height: 1.2
}

.buttonText {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1
}

.boxButton {
	cursor: pointer
}

.pillButton {
	border-radius: 100vh;
	cursor: pointer
}

#back-button,
#back-button-controller,
#back-button-from-map,
#track-button-container,
#track-button-controller {
	position: sticky
}

#filler {
	z-index: 0
}

.bodyText,
.titleText {
	z-index: 1
}

#map,
#map-container,
#transport-table {
	z-index: 2
}

#back-button-controller,
#back-button-from-map,
#coffee-button,
#map-back-button-controller,
#track-button-container,
.main-button {
	z-index: 3
}

#coffee-button-controller,
#welcome-content {
	display: flex;
	flex-direction: column
}

#main-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr
}

.main-button {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
	font-weight: 600;
	cursor: pointer;
	color: var(--black);
	transition: .2s ease
}

.main-button:hover {
	scale: 1.05;
	transition: scale .2s ease
}

.main-button a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-grow: 1;
	grid-row-start: 2;
	grid-row-end: 3;
	align-self: end
}

.mainBusButton {
	background: radial-gradient(ellipse at top left, var(--busColorLight), var(--lightColor))
}

.mainTrolleybusButton {
	background: radial-gradient(ellipse at top left, var(--trolleybusColorLight), var(--lightColor))
}

.mainTramButton {
	background: radial-gradient(ellipse at top left, var(--tramColorLight), var(--lightColor))
}

.mainTrainButton {
	background: radial-gradient(ellipse at top left, var(--trainColorLight), var(--lightColor))
}

#coffee-button {
	background-color: var(--black)
}

#coffee-button a {
	display: block;
	color: var(--white);
	text-decoration: none
}

#filler {
	flex-grow: 1
}

#arrow,
#main-view-title,
#map-view-title {
	color: var(--black)
}

#back-button-from-map #arrow,
#back-button-from-map #main-view-title,
#back-button-from-map #map-view-title {
	color: var(--white)
}

#back-button {
	background-color: var(--lightColor)
}

#back-button.bus-selected {
	background-color: var(--busColorLight)
}

#back-button.trolleybus-selected {
	background-color: var(--trolleybusColorLight)
}

#back-button.tram-selected {
	background-color: var(--tramColorLight)
}

#back-button.train-selected {
	background-color: var(--trainColorLight)
}

#back-button-from-map {
	background-color: var(--black);
	width: 100%
}

#button-content {
	display: flex
}

#track-button-container {
	background-color: var(--black);
	text-align: center
}

#track-button {
	color: var(--white);
	display: block
}

#transport-table {
	width: 100%;
	border-collapse: collapse
}

#transport-table td,
#transport-table th {
	border-bottom: 1px solid var(--lightColor)
}

#transport-table td:nth-child(2) {
	font-weight: 700
}

#transport-table tbody>tr:last-child>td {
	border-bottom: 0
}

.status {
	display: inline-block;
	border-radius: 50%;
	vertical-align: middle
}

.status.online {
	background-color: var(--green)
}

.status.offline {
	background-color: var(--lightColor)
}

input[type=checkbox] {
	appearance: none;
	background-color: var(--white);
	margin: 0;
	border-radius: 50%;
	transition: all .1s ease-in-out;
	pointer-events: none
}

input[type=checkbox]:checked {
	transform: scale(.95);
	background-color: var(--black);
	border: 0
}

input[type=checkbox]:disabled {
	border: 0
}

#map-view-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

@media only screen and (max-width:1199px) {
	.popup {
		padding: var(--squareButtonPaddingMobile);
		border-radius: var(--boxRadiusMobile);
		gap: var(--gapMobile)
	}

	.popup h2 {
		font-size: calc(var(--titleMobile)/ 1.25);
		font-weight: 600
	}

	.popup p {
		font-size: var(--bodyMobile);
		font-weight: 500
	}

	.popup-buttons {
		gap: calc(var(--gapMobile)/ 2)
	}

	.popup-buttons button {
		padding: calc(var(--squareButtonPaddingMobile)/ 2) var(--squareButtonPaddingMobile);
		border-radius: calc(var(--boxRadiusMobile)/ 2);
		font-size: var(--bodyMobile)
	}

	.titleText {
		font-size: var(--titleMobile)
	}

	.bodyText {
		font-size: var(--bodyMobile)
	}

	.buttonText {
		font-size: var(--buttonMobile)
	}

	.boxButton {
		border-radius: var(--boxRadiusMobile)
	}

	.view {
		display: flex;
		flex-direction: column;
		gap: var(--gapMobile)
	}

	#welcome-content {
		margin: var(--marginMobile) var(--marginMobile) 0 var(--marginMobile);
		gap: var(--gapMobile)
	}

	#coffee-button-controller {
		margin: 0 var(--marginMobile) var(--marginMobile) var(--marginMobile)
	}

	#coffee-button-controller #filler {
		display: none
	}

	#coffee-button a {
		margin: var(--squareButtonPaddingMobile)
	}

	#main-buttons {
		height: 100%;
		margin: 0 var(--marginMobile);
		gap: var(--gapMobile)
	}

	.mainButtonIcon {
		margin: var(--squareButtonPaddingMobile) var(--squareButtonPaddingMobile) 0 var(--squareButtonPaddingMobile)
	}

	.main-button a {
		margin: 0 var(--squareButtonPaddingMobile) var(--squareButtonPaddingMobile) var(--squareButtonPaddingMobile)
	}

	.mainButtonIcon {
		width: var(--welcomeIconMobile);
		pointer-events: none
	}

	#button-content {
		margin: var(--pillButtonPaddingMobile);
		gap: var(--gapMobile)
	}

	#track-button-container {
		bottom: var(--marginMobile)
	}

	#track-button-controller {
		display: flex;
		flex-direction: column;
		height: 100%;
		margin: 0 var(--marginMobile) var(--marginMobile) var(--marginMobile)
	}

	#track-button {
		margin: var(--pillButtonPaddingMobile)
	}

	#back-button-controller {
		margin: var(--marginMobile) var(--marginMobile) 0 var(--marginMobile)
	}

	#back-button,
	#back-button-controller {
		top: var(--marginMobile)
	}

	#track-button-container,
	#track-button-controller {
		bottom: var(--marginMobile)
	}

	#transport-table td,
	#transport-table th {
		padding: var(--tablePaddingMobile) var(--boxRadiusMobile)
	}

	.status {
		width: var(--statusMobile);
		height: var(--statusMobile)
	}

	input[type=checkbox] {
		width: var(--checkboxMobile);
		height: var(--checkboxMobile);
		border: var(--checkboxBorderMobile) solid var(--lightColor)
	}

	#table-controller {
		margin: 0 var(--marginMobile)
	}

	#map-back-button-controller {
		margin: var(--marginMobile) var(--marginMobile) 0 var(--marginMobile)
	}

	#map-container {
		position: absolute;
		width: 100%;
		min-height: 100dvh
	}

	#map {
		width: 100%;
		position: absolute;
		min-height: 100dvh;
		width: 100%
	}

	#short-description {
		display: none
	}

	.maplibregl-popup-content {
		font-size: calc(var(--bodyMobile) - .5vw)
	}

	.route-bubble {
		padding: 1vw 3vw
	}
}

@media only screen and (max-width:1199px) and (orientation:landscape) {
	.popup {
		padding: var(--squareButtonPaddingLandscape);
		border-radius: var(--boxRadiusLandscape);
		gap: var(--gapLandscape)
	}

	.popup h2 {
		font-size: calc(var(--titleLandscape)/ 1.5);
		font-weight: 600
	}

	.popup p {
		font-size: var(--bodyLandscape);
		font-weight: 500
	}

	.popup-buttons {
		gap: calc(var(--gapLandscape)/ 2)
	}

	.popup-buttons button {
		padding: calc(var(--squareButtonPaddingLandscape)/ 2) var(--squareButtonPaddingLandscape);
		border-radius: calc(var(--boxRadiusLandscape)/ 2);
		font-size: var(--bodyLandscape)
	}

	.titleText {
		font-size: var(--titleLandscape)
	}

	.bodyText {
		font-size: var(--bodyLandscape)
	}

	.buttonText {
		font-size: var(--buttonLandscape)
	}

	.boxButton {
		border-radius: var(--boxRadiusLandscape)
	}

	.view {
		display: grid;
		grid-template-columns: 2fr 3fr;
		grid-template-rows: 1fr;
		row-gap: 0 !important;
		column-gap: var(--marginLandscape) !important
	}

	#welcome-content {
		margin: var(--marginLandscape) 0 0 var(--marginLandscape);
		gap: var(--gapLandscape)
	}

	#main-buttons {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 3;
		margin: 0 var(--marginLandscape) 0 0;
		gap: var(--gapLandscape)
	}

	.mainBusButton,
	.mainTrolleybusButton {
		margin: var(--marginLandscape) 0 0 0
	}

	.mainTrainButton,
	.mainTramButton {
		margin: 0 0 var(--marginLandscape) 0
	}

	.mainButtonIcon {
		margin: var(--squareButtonPaddingLandscape) var(--squareButtonPaddingLandscape) 0 var(--squareButtonPaddingLandscape)
	}

	.main-button a {
		margin: 0 var(--squareButtonPaddingLandscape) var(--squareButtonPaddingLandscape) var(--squareButtonPaddingLandscape)
	}

	.mainButtonIcon {
		width: var(--welcomeIconLandscape);
		pointer-events: none
	}

	#button-content {
		margin: var(--pillButtonPaddingLandscape);
		gap: var(--gapLandscape)
	}

	#transport-table {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 3
	}

	#transport-table td,
	#transport-table th {
		padding: var(--tablePaddingLandscape) var(--boxRadiusLandscape)
	}

	input[type=checkbox] {
		width: var(--checkboxLandscape);
		height: var(--checkboxLandscape);
		border: var(--checkboxBorderLandscape) solid var(--lightColor)
	}

	#coffee-button-controller {
		margin: 0 0 var(--marginLandscape) var(--marginLandscape)
	}

	#coffee-button a {
		margin: var(--squareButtonPaddingLandscape)
	}

	#back-button-controller {
		margin: var(--marginLandscape) 0 0 var(--marginLandscape);
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2
	}

	#back-button,
	#back-button-controller {
		top: var(--marginLandscape)
	}

	#track-button-container,
	#track-button-controller {
		bottom: var(--marginLandscape)
	}

	#track-button-container {
		bottom: var(--marginLandscape)
	}

	#track-button-controller {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: 2;
		margin: 0 0 0 var(--marginLandscape);
		z-index: 3
	}

	#track-button-controller #filler {
		display: none
	}

	#track-button {
		margin: var(--pillButtonPaddingLandscape)
	}

	#table-controller {
		margin: var(--marginLandscape) var(--marginLandscape) var(--marginLandscape) 0;
		grid-row-start: 1;
		grid-row-end: 3
	}

	.status {
		width: var(--statusLandscape);
		height: var(--statusLandscape)
	}

	#map-back-button-controller {
		margin: var(--marginLandscape) 0 0 var(--marginLandscape);
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2
	}

	#map {
		display: block;
		position: relative;
		height: 100%;
		border-radius: var(--boxRadiusLandscape);
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
		min-height: unset
	}

	#map-container {
		margin: var(--marginLandscape) var(--marginLandscape) var(--marginLandscape) 0;
		position: relative;
		min-height: unset;
		width: unset
	}

	#main-view #filler {
		min-height: 100%;
		pointer-events: none
	}

	#short-description {
		display: block;
		margin-top: var(--gapLandscape);
		position: sticky;
		top: calc(var(--marginLandscape) + var(--marginLandscape) + var(--squareButtonPaddingLandscape) + var(--checkboxLandscape))
	}

	#map-view-title {
		max-width: 16.5vw
	}

	.maplibregl-popup-content {
		font-size: calc(var(--bodyLandscape) - .5vh)
	}

	.route-bubble {
		padding: 1vh 2vh
	}
}

@media only screen and (min-width:1200px) {
	.popup {
		padding: var(--squareButtonPaddingDesktop);
		border-radius: var(--boxRadiusDesktop);
		gap: var(--gapDesktop)
	}

	.popup h2 {
		font-size: calc(var(--titleDesktop)/ 1.5);
		font-weight: 600
	}

	.popup p {
		font-size: var(--bodyDesktop);
		font-weight: 500
	}

	.popup-buttons {
		gap: calc(var(--gapDesktop)/ 2)
	}

	.popup-buttons button {
		padding: calc(var(--squareButtonPaddingDesktop)/ 2) var(--squareButtonPaddingDesktop);
		border-radius: calc(var(--boxRadiusDesktop)/ 2);
		font-size: var(--bodyDesktop)
	}

	.titleText {
		font-size: var(--titleDesktop)
	}

	.bodyText {
		font-size: var(--bodyDesktop)
	}

	.buttonText {
		font-size: var(--buttonDesktop)
	}

	.boxButton {
		border-radius: var(--boxRadiusDesktop)
	}

	.view {
		display: grid;
		grid-template-columns: 2fr 3fr;
		grid-template-rows: 1fr;
		row-gap: 0 !important;
		column-gap: var(--marginDesktop) !important
	}

	#welcome-content {
		margin: var(--marginDesktop) 0 0 var(--marginDesktop);
		gap: var(--gapDesktop)
	}

	#main-buttons {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 3;
		margin: 0 var(--marginDesktop) 0 0;
		gap: var(--gapDesktop)
	}

	.mainBusButton,
	.mainTrolleybusButton {
		margin: var(--marginDesktop) 0 0 0
	}

	.mainTrainButton,
	.mainTramButton {
		margin: 0 0 var(--marginDesktop) 0
	}

	.mainButtonIcon {
		margin: var(--squareButtonPaddingDesktop) var(--squareButtonPaddingDesktop) 0 var(--squareButtonPaddingDesktop)
	}

	.main-button a {
		margin: 0 var(--squareButtonPaddingDesktop) var(--squareButtonPaddingDesktop) var(--squareButtonPaddingDesktop)
	}

	.mainButtonIcon {
		width: var(--welcomeIconDesktop);
		pointer-events: none
	}

	#button-content {
		margin: var(--pillButtonPaddingDesktop);
		gap: var(--gapDesktop)
	}

	#transport-table {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 3
	}

	#transport-table td,
	#transport-table th {
		padding: var(--tablePaddingDesktop) var(--boxRadiusDesktop)
	}

	input[type=checkbox] {
		width: var(--checkboxDesktop);
		height: var(--checkboxDesktop);
		border: var(--checkboxBorderDesktop) solid var(--lightColor)
	}

	#coffee-button-controller {
		margin: 0 0 var(--marginDesktop) var(--marginDesktop)
	}

	#coffee-button a {
		margin: var(--squareButtonPaddingDesktop)
	}

	#back-button-controller {
		margin: var(--marginDesktop) 0 0 var(--marginDesktop);
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2
	}

	#back-button,
	#back-button-controller {
		top: var(--marginDesktop)
	}

	#track-button-container,
	#track-button-controller {
		bottom: var(--marginDesktop)
	}

	#track-button-container {
		bottom: var(--marginDesktop)
	}

	#track-button-controller {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: 2;
		margin: var(--marginDesktop) 0 0 var(--marginDesktop);
		z-index: 3
	}

	#track-button-controller #filler {
		display: none
	}

	#track-button {
		margin: var(--pillButtonPaddingDesktop)
	}

	#table-controller {
		margin: var(--marginDesktop) var(--marginDesktop) var(--marginDesktop) 0;
		grid-row-start: 1;
		grid-row-end: 3
	}

	.status {
		width: var(--statusDesktop);
		height: var(--statusDesktop)
	}

	#map-back-button-controller {
		margin: var(--marginDesktop) 0 0 var(--marginDesktop);
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2
	}

	#map {
		display: block;
		position: relative;
		height: 100%;
		border-radius: var(--boxRadiusDesktop);
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2
	}

	#map-container {
		margin: var(--marginDesktop) var(--marginDesktop) var(--marginDesktop) 0
	}

	#main-view #filler {
		min-height: 100%;
		pointer-events: none
	}

	#short-description {
		margin-top: var(--gapDesktop);
		position: sticky;
		top: calc(var(--marginDesktop) + var(--marginDesktop) + var(--squareButtonPaddingDesktop) + var(--checkboxDesktop))
	}

	#map-view-title {
		max-width: 16.5vw
	}

	.maplibregl-popup-content {
		font-size: calc(var(--bodyDesktop) - .5vh)
	}

	.route-bubble {
		padding: 1vh 2vh
	}
}