/* #region CSS Variables */
:root {
	--green: #79c000;
	--black: #231f20;
	--white: #ffffff;
	--medium-gray: #57565d;
	--gray: #d9d9da;
	--medium-gray: #57565d;
	--dark-gray: #454449;
	--shadow-black: rgba(35, 31, 32, 0.2);
	--shadow-green: rgba(121, 192, 0, 0.2);
	--glass-white: rgba(255, 255, 255, 0.7);
	--glass-green: rgba(121, 192, 0, 0.9);
	--glass-black: rgba(35, 31, 32, 0.7);
	--glass-gray: rgba(217, 217, 218, 0.7);
}
/* #endregion */

/* #region Loading animation */
#spinner {
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
	object-fit: contain;
	/*animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;*/
}
.lds-ring {
	display: inline-block;
	width: 80px;
	height: 80px;
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
}
.lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 64px;
	height: 64px;
	margin: 8px;
	border: 8px solid var(--green);
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: var(--green) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
	animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
	animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
	animation-delay: -0.15s;
}
@keyframes lds-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* #endregion */

/* #region Icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
.icon-green {
	color: var(--green);
}
.icon-white {
	color: white;
}
.bi::before {
	vertical-align: 0 !important;
}
/* #endregion */

/* #region Animations and Transitions */

/* appear from bottom animations */
@keyframes smooth-appear {
	from {
		bottom: -35%;
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* slide appear animations (station cards)*/
@keyframes smooth-slide-from-left {
	from {
		left: -100%;
		opacity: 0;
	}
}
@keyframes smooth-slide-from-right {
	from {
		left: 100%;
		opacity: 0;
	}
}
@keyframes smooth-slide-to-left {
	to {
		left: -100%;
		opacity: 0;
	}
}
@keyframes smooth-slide-to-right {
	to {
		left: 100%;
		opacity: 0;
	}
}
@keyframes smooth-slide-from-bottom {
	from {
		top: 100%;
		opacity: 0;
	}
}
@keyframes smooth-slide-to-bottom {
	to {
		top: 100%;
		opacity: 0;
	}
}
.smooth-slide-to-left {
	animation: smooth-slide-to-left 0.5s ease forwards !important;
}
.smooth-slide-to-right {
	animation: smooth-slide-to-right 0.5s ease forwards !important;
}
.smooth-slide-to-bottom {
	animation: smooth-slide-to-bottom 0.3s ease forwards !important;
}

/* Zoom controls animations */
@keyframes smooth-slide-up-zoom-controls {
	to {
		bottom: calc(2vh + 7vh + 2vh + 50vw + 2vh);
	}
}
@keyframes smooth-slide-down-zoom-controls {
	from {
		bottom: calc(2vh + 7vh + 2vh + 50vw + 2vh);
	}
	to {
		bottom: calc(2vh + 7vh + 2vh);
	}
}
.smooth-slide-up-zoom-controls {
	animation: smooth-slide-up-zoom-controls 0.5s ease forwards !important;
}
.smooth-slide-down-zoom-controls {
	animation: smooth-slide-down-zoom-controls 0.5s ease forwards !important;
}
@keyframes smooth-slide-top-zoom-controls {
	to {
		bottom: calc(100dvh - 22vh - 2vw);
	}
}
@keyframes smooth-slide-bottom-zoom-controls {
	from {
		bottom: calc(100dvh - 22vh - 2vw);
	}
	to {
		bottom: calc(2vh + 7vh + 2vh);
	}
}
.smooth-slide-top-zoom-controls {
	animation: smooth-slide-top-zoom-controls 0.5s ease forwards !important;
}
.smooth-slide-bottom-zoom-controls {
	animation: smooth-slide-bottom-zoom-controls 0.5s ease forwards !important;
}

/* Search bar appear animations */
@keyframes slide-fwd-top {
	from {
		-webkit-transform: translateZ(-12dvh) translateY(10dvh);
		transform: translateZ(-12dvh) translateY(10dvh);
	}
	to {
		-webkit-transform: translateZ(0) translateY(0);
		transform: translateZ(0) translateY(0);
	}
}
@keyframes slide-back-top {
	from {
		-webkit-transform: translateZ(0) translateY(0);
		transform: translateZ(0) translateY(0);
	}
	to {
		-webkit-transform: translateZ(-12dvh) translateY(10dvh);
		transform: translateZ(-12dvh) translateY(10dvh);
	}
}
.slide-fwd-top {
	animation: slide-fwd-top 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.slide-back-top {
	animation: slide-back-top 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both !important;
}

/* Bike list elements fill animation */
@keyframes filler {
	0% {
		width: 0;
		border-radius: 999px;
	}
}

.no-animation {
	animation: none !important;
}
/* #endregion */

/* #region Fill the window and set font */
html,
body {
	height: 100dvh;
	width: 100dvw;
	margin: 0;
	padding: 0;
	position: relative;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: normal;
	user-select: none;
	overflow-y: scroll;
	overflow-x: hidden;
}
/* #endregion */

/* #region Map */
#map {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 0;
	bottom: 0;
}
#mapOverlay {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 40%);
	pointer-events: none;
	touch-action: none;
}
.ol-attribution {
	top: .5em;
	left: .5em;
	bottom: unset !important;
	right: unset !important;
	border-radius: 999px !important;
	margin-left: env(safe-area-inset-left);
	margin-top: env(safe-area-inset-top);
}
.ol-attribution button {
	all: unset;
	height: 1.375em;
	width: 1.375em;
	line-height: .4em;
	border-radius: 999px;
	background-color: var(--glass-white);
	color: var(--green);
	text-align: center;
	font-family: Roboto, Arial, sans-serif;
	font-weight: bold;
}
.ol-attribution button:focus, .ol-attribution button:hover {
	outline: 1px solid var(--green);
	color: var(--green);
	line-height: .4em;
}
/* #endregion */

/* #region Logo */
#logo {
	width: 35%;
	position: absolute;
	left: 2vh;
	bottom: 2vh;
	margin-left: env(safe-area-inset-left);	
}
/* #endregion */

/* #region Zoom controls */
#zoomControls {
	background-color: transparent;
	width: fit-content;
	height: fit-content;
	position: absolute;
	right: calc(2vh);
	bottom: calc(2vh + 7vh + 2vh);
	display: flex;
	flex-direction: column;
	gap: 1vh;
	margin-right: env(safe-area-inset-right);	
}
#zoomControls div {
	background-color: var(--green);
	width: 6vh;
	height: 6vh;
	font-size: calc(0.2 * 20vh);
	border-radius: 999px;
	color: white;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
#zoomControls div i {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* #endregion */

/* #region Search bar */
#searchBarDiv {
	width: calc(100% - 4vh);
	height: 7vh;
	position: absolute;
	bottom: 2vh;
	left: 2vh;
	z-index: 2;
	animation: slide-fwd-top 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	margin-left: env(safe-area-inset-left);
	box-shadow: 0px 1px 6px 0px var(--gray);
	border-radius: 999px;
}
#searchBarCancelButton {
	background-color: var(--white);
	border-radius: 999px 0 0 999px;
	color: var(--green);
	/*border: 1px solid var(--green);*/
	border-right: none;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 6vh;
	height: 7vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
#searchBarCancelButton i {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.4rem;
}
#searchBar {
	background-color: rgb(255, 255, 255);
	width: calc(100vw - 4vh - 6vh);
	height: 7vh;
	position: absolute;
	left: 6vh;
	bottom: 0;
	outline: none;
	border: none;
	/*border: 1px solid var(--green);*/
	border-left: none;
	border-radius: 0 999px 999px 0;
	display: flex;
	align-items: center;
	padding: 0;
	color: var(--green);
	font-size: medium;
	box-sizing: content-box;
}
#searchBar::-webkit-input-placeholder {
	color: var(--green);
}

/* Remove default webkit styling */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
#searchBar:-webkit-autofill,
#searchBar:-webkit-autofill:hover, 
#searchBar:-webkit-autofill:focus, 
#searchBar:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* #endregion */

/* #region Navigation Button */
#navigationButton {
	background-color: var(--glass-white);
	width: 7vh;
	height: 7vh;
	position: absolute;
	z-index: 2;
	right: calc(2vh + 7vh + 2vh);
	bottom: 2vh;
	border-radius: 999px;
	/*outline: 1px solid var(--green);*/
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 1px 6px 0px var(--green);
	margin-right: env(safe-area-inset-right);
	font-size: 1.8rem;
	color: var(--green);
}
#navigationButton img {
	border-radius: 999px;
	width: 4vh;
	height: 4vh;
}
#navigationButton i {
	margin-top: 0.4rem;
}
/* #endregion */

/* #region User picture */
#userPicture {
	background-color: var(--glass-white);
	width: 7vh;
	height: 7vh;
	position: absolute;
	z-index: 2;
	right: 2vh;
	bottom: 2vh;
	border-radius: 999px;
	/*outline: 1px solid var(--green);*/
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 1px 6px 0px var(--green);
	margin-right: env(safe-area-inset-right);
}
#userPicture #userInitials {
	font-size: 3dvh;
	color: var(--green);
}
/* #endregion */

/* #region Station card */
.station-card {
	background-color: transparent;
	width: 90vw;
	height: 50vw;
	position: absolute;
	z-index: 1;
	left: 5vw;
	bottom: calc(2vh + 7vh + 2vh);
	border-radius: 20px;
	box-shadow: 5px 5px 15px 0px var(--shadow-black);
	animation: smooth-slide-from-left 0.5s ease forwards;
	-webkit-backdrop-filter: blur(1rem);
	backdrop-filter: blur(1rem);
	margin-left: env(safe-area-inset-left);
}
.station-card #graphics {
	height: 50%;
	width: 100%;
	object-fit: cover;
	rotate: 180deg;
	opacity: 5%;
	display: none;
}
.station-card #stationIDandDistanceContainer {
	width: calc(100% - 17.5vw);
	position: absolute;
	left: 5vw;
	top: 4vw;
	display: flex;
	align-items: center;
	justify-content: left;
	flex-direction: row;
	gap: 0.5rem;
}
.station-card #stationID {
	width: fit-content;
	text-align: left;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--dark-gray);
}
.station-card #stationDistance {
	width: fit-content;
	font-size: 0.65rem;
	padding: 0.1rem 0.25rem;
	background-color: var(--glass-gray);
	border-radius: 0.3rem;
	color: var(--dark-gray);
}
.station-card #stationName {
	width: calc(100% - 17.5vw);
	position: absolute;
	left: 5vw;
	top: calc(4vw + 1rem + 0.2rem);
	text-align: left;
	font-size: 0.7rem;
	line-height: 0.7rem;
	color: var(--medium-gray);
}
.station-card #docksImage {
	width: 42.5%;
	height: 26%;
	object-fit: contain;
	position: absolute;
	left: 5vw;
	bottom: calc(5vw + 2.5rem + 2vw);
}
.station-card #docksButton {
	width: 42.5%;
	height: 2.5rem;
	position: absolute;
	left: 5vw;
	bottom: 5vw;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--black);
	box-shadow: 0px 1px 6px 0px var(--black);
}
.station-card #bikesImage {
	width: 42.5%;
	height: 24%;
	object-fit: contain;
	position: absolute;
	right: 5vw;
	bottom: calc(5vw + 2.5rem + 2vw);
}
.station-card #bikesButton {
	width: 42.5%;
	height: 2.5rem;
	position: absolute;
	right: 5vw;
	bottom: 5vw;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--green);
	box-shadow: 0px 1px 6px 0px var(--green);
}
.station-card #bikesButtonDisabled {
    /* Same as above, but with gray instead of green */
    background-color: var(--white);
    width: 42.5%;
    height: 2.5rem;
    position: absolute;
    right: 5vw;
    bottom: 5vw;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gray);
    box-shadow: 0px 1px 6px 0px var(--gray);
}
.station-card #availableBikesNumber {
	width: 90%;
	height: 10%;
	position: absolute;
	z-index: 2;
	left: 5%;
	top: 35%;
	text-align: center;
}
.station-card #cancelButton {
	background-color: var(--green);
	width: 42.5%;
	height: 15%;
	position: absolute;
	z-index: 2;
	left: 5%;
	top: 52%;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-weight: bold;
}
.station-card #navigateToButton {
	position: absolute;
	right: 5vw;
	top: 5vw;
	font-size: 1.2rem;
	color: var(--dark-gray)
}
.station-card #startNavigationButton {
	position: absolute;
	top: -8vh;
	right: 7vh;
	background-color: var(--glass-black);
	border-radius: 999px;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 6vh;
	width: 6vh;
	box-shadow: 0px 4px 6px 0px var(--shadow-black);
}
.station-card #startNavigationButton:hover {
	cursor: pointer;
}
.station-card #startNavigationButton i {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 180%;
}
.station-card #routeDetails {
	position: absolute;
	top: -8vh;
	left: 0;
	background-color: var(--glass-black);
	border-radius: 999px;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 6vh;
	padding: 0 2dvh;
	font-size: 0.8rem;
	box-shadow: 0px 4px 6px 0px var(--shadow-black);
}
/* #endregion */

/* #region Login menu */
.login-menu {
	background-color: rgba(35, 31, 32, 0.9);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}
#loginCard #logo {
	position: absolute;
	top: calc(-15.625% - 3dvh); /* the -15.625 is calculated using the aspect ratio of the logo (800x250) */
	width: 50%;
	left: 25%;
}
#loginCard {
	background-color: white;
	width: 100%;
	height: 30dvh;
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 30px 30px 0 0;
	animation: smooth-appear 0.5s ease forwards;
}
#loginCard input {
	position: absolute;
	width: calc(70% - 35px - 15px);
	height: 5.25dvh;
	left: 15%;
	top: 10%;
	line-height: 15%;
	text-decoration: none;
	border: none;
	outline: 1px solid var(--green);
	padding: 5px 15px;
	border-radius: 999px;
	background-color: var(--glass-white);
	background-image: url("images/envelope-at.svg");
	background-repeat: no-repeat;
	background-position-x: calc(100% - 10px);
	background-position-y: calc(100% - 14px);
	padding-right: 35px;
	z-index: 1;
}
#loginCard input[name="password"] {
	top: calc(10% + 5.25dvh + 10px + 2dvh);
	background-image: url("images/key.svg");
}
#registerButton,
#loginButton {
	background-color: var(--green);
	color: var(--white);
	width: 37.5%;
	height: 6dvh;
	position: absolute;
	z-index: 1;
	left: 7.5%;
	bottom: 10%;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#loginButton {
	left: unset;
	right: 7.5%;
}
#loginCard #footer {
	position: absolute;
	bottom: 0;
	left: 0;
	animation: none;
	height: 14dvh;
	width: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.05;
}
/* #endregion */

/* #region Bike list */
.bike-list {
	background-color: var(--white);
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	border-radius: 0;
	animation: smooth-slide-from-bottom 0.5s ease forwards;
}
.bike-list #graphics {
	height: 25vw;
	width: 100%;
	object-fit: cover;
	rotate: 180deg;
	opacity: 5%;
}
.bike-list #backButton {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 7vh;
	height: 7vh;
	font-size: calc(0.35 * 7vh);
	margin-bottom: 1vh;
	border-radius: 999px;
	color: var(--green);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: env(safe-area-inset-left);
	margin-top: env(safe-area-inset-top);
}
.bike-list #backButton i {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bike-list #stationIDandDistanceContainer {
	width: calc(100% - 7vh - 10px - 5%);
	position: absolute;
	left: calc(10px + 7vh);
	top: 3vh;
	display: flex;
	align-items: center;
	justify-content: left;
	flex-direction: row;
	gap: 0.5rem;
	margin-left: env(safe-area-inset-left);
	margin-top: env(safe-area-inset-top);
}
.bike-list #stationID {
	text-align: left;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--dark-gray);
	z-index: 2;
}
.bike-list #stationDistance {
	font-size: 0.65rem;
	padding: 0.1rem 0.25rem;
	background-color: var(--glass-gray);
	border-radius: 0.3rem;
	color: var(--dark-gray);
}
.bike-list #stationName {
	width: calc(100% - 7vh - 10px - 5%);
	position: absolute;
	left: calc(10px + 7vh);
	top: calc(3vh + 1rem + 0.2rem);
	text-align: left;
	font-size: 0.7rem;
	line-height: 0.7rem;
	color: var(--medium-gray);
	margin-left: env(safe-area-inset-left);
	margin-top: env(safe-area-inset-top);
	z-index: 2;
}
.bike-list #listGradient {
	position: absolute;
	top: 17.5vw;
	left: 0;
	width: 100%;
	height: 1.2vh;
	background: linear-gradient(180deg, #fff 0%, transparent 100%);
	z-index: 2;
}
.bike-list #bikeList {
	position: absolute;
	width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
	left: 0;
	top: 17.5vw;
	list-style-type: none;
	padding: 0;
	margin: 0;
	max-height: calc(100dvh - 17.5vw - 2vh);
	overflow: scroll;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 2vh;
	margin-left: env(safe-area-inset-left);
	margin-right: env(safe-area-inset-right);
}
.bike-list-element {
	background-color: var(--white);
	border-radius: 999px;
	position: relative;
	height: 7vh;
	width: 90%;
	margin-bottom: 10px;
	box-shadow: 0px 1px 6px 0px var(--green);
	flex-shrink: 0;
}
.bike-list-element #battery {
	position: absolute;
	background: var(--green);
	border-radius: 999px;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	height: 100%;
	animation: filler 0.5s ease-in-out;
}
.bike-list-element #content {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	position: relative;
	display: flex;
	align-items: center;
}
.bike-list-element #content #bikeIcon {
	height: 4vh;
	object-fit: contain;
	margin-left: 15px;
	margin-right: 10px;
}
.bike-list-element #content #bikeInfo #bikeName {
	color: var(--black);
	font-weight: bold;
	font-size: 0.9rem;
}
.bike-list-element #content #bikeInfo #bikeDock {
	color: var(--black);
	font-weight: normal;
	font-size: 0.7rem;
}
.bike-list-element #content #bikeInfo #serialNum {
	color: var(--black);
	font-weight: normal;
	font-size: 0.7rem;
}
.bike-list-element #content #reserveBikeIcon {
	margin-left: auto;
	margin-right: 20px;
	color: var(--black);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3dvh;
}
.bike-list #noBike {
	margin-bottom: 5vh;
	text-align: center;
}
/* #endregion */

/* #region Bike reserve */
.bike-reserve {
	background-color: rgba(35, 31, 32, 0.9);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}
#bikeReserveCard {
	background-color: white;
	width: 100%;
	height: 35%;
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 30px 30px 0 0;
}
#bikeReserveCard #backButton {
	position: absolute;
	top: 2%;
	left: 2%;
	background-color: transparent;
	width: 6vh;
	height: 6vh;
	font-size: calc(0.35 * 8vh);
	margin-bottom: 1vh;
	border-radius: 999px;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}
#bikeReserveCard #backButton i {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--green);
}
#bikeReserveCard #textContent {
	position: absolute;
	top: 20px;
	left: calc(6vh + 10px);
	width: calc(80% - 20px - 20px);
	display: flex;
	flex-direction: column;
}
#bikeReserveCard #textContent #bikeName {
	font-weight: bold;
	font-size: 1.2rem;
}
#bikeReserveCard #textContent #bikeDock,
#bikeReserveCard #textContent #bikeBattery {
	font-size: 0.9rem;
}
#bikeReserveCard #stationName {
	font-size: 0.9rem;
	margin-top: auto;
	margin-bottom: 0;
	width: calc(100vw - 8dvh);
	text-align: center;
	padding: 0 4dvh;
	position: absolute;
	left: 0;
	top: 15dvh;
}
#bikeReserveCard #bikeLogo {
	position: absolute;
	top: 3dvh;
	right: 3dvh;
	width: 20%;
}
#bikeReserveCard #unlockSlider {
	appearance: none;
	background-color: var(--black);
	width: 90%;
	height: 20%;
	position: absolute;
	left: 5%;
	bottom: 10%;
	border-radius: 999px;
	z-index: 4;
}
#bikeReserveCard #unlockSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: calc(0.2 * 35vh);
	width: 45vw;
	border-radius: 999px;
	background-color: var(--green);
	background-image: url("images/unlockSlider_PT.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}
#bikeReserveCard #unlockSlider::-moz-range-thumb {
	height: 100%;
	width: 50%;
	background-color: var(--green);
	cursor: pointer;
	border-radius: 999px;
	border: none;
	background-image: url("images/unlockSlider_PT.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#bikeReserveCard #footer {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 14dvh;
	width: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.05;
}
.timer {
    position: absolute;
	bottom: 13dvh;
	left: calc(50vw - 8dvh);
	z-index: 1;
}
.timer > svg {
    width: 16dvh;
    height: 16dvh;
}
.timer > svg > circle {
    fill: none;
    stroke-opacity: 0.3;
    stroke: var(--green);
    stroke-width: 10;
    transform-origin: center center;
    transform: rotate(-90deg);
}
.timer > svg > circle + circle {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke-linecap: round;
    stroke-opacity: 1;
}
.timer.animatable > svg > circle + circle {
    transition: stroke-dashoffset 0.3s ease;
}
.timer > svg > text {
    font-size: 1.5rem;
}
.timer > svg > text + text {
    font-size: 0.8rem;
}
#bikeReserveCard #bikeLeavingDock {
	width: 70%;
	aspect-ratio: 1/1;
	object-fit: contain;
	position: absolute;
	left: 15%;
	bottom: 0;
}
/* #endregion */

/* #region Trip overlay */
.trip-overlay {
	background-color: var(--green);
	width: calc(100% - 4dvh);
	height: 24dvh;
	position: absolute;
	top: 2dvh;
	left: 2dvh;
	border-radius: 30px;
	z-index: 3;
}
.trip-overlay #onTripText {
	position: absolute;
	top: 2dvh;
	left: 2.5dvh;
	font-size: 2rem;
	color: var(--black);
	z-index: 4;
}
.trip-overlay #bikeLogo {
	position: absolute;
	top: -1dvh;
	right: 1dvh;
	width: 30%;
	z-index: 4;
}
.trip-overlay #tripCost {
	position: absolute;
	bottom: 2dvh;
	left: 2.5dvh;
	font-size: 1.2rem;
	line-height: 1.2rem;
	color: var(--black);
	z-index: 4;
}
.trip-overlay #tripTime {
	position: absolute;
	bottom: calc(2dvh + 1.2rem + 1dvh);
	left: 2.5dvh;
	font-size: 1.2rem;
	line-height: 1.2rem;
	color: var(--black);
	z-index: 4;
}
.trip-overlay #tripBike {
	position: absolute;
	bottom: calc(2dvh + 2.4rem + 2dvh);
	left: 2.5dvh;
	font-size: 1.2rem;
	line-height: 1.2rem;
	color: var(--black);
	z-index: 4;
}
.trip-overlay #callAssistance {
	position: absolute;
	bottom: 2dvh;
	right: 3dvh;
	background-color: var(--black);
	z-index: 4;
	padding: 1.5dvh;
	font-size: 1.5rem;
	color: var(--green);
	border-radius: 999px;
	aspect-ratio: 1/1;
	width: 1.5rem;
	height: 1.5rem;
}
.trip-overlay #footer {
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateX(-50%);
	width: 200%;
	opacity: 10%;
	z-index: 3;
}
/* #endregion */

/* #region User menu */
.user-settings {
	background-color: var(--white);
	width: 100%;
	min-height: 100%;
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	animation: smooth-slide-from-bottom 0.3s ease forwards;
}
.user-settings #backButton {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: transparent;
	width: 6vh;
	height: 6vh;
	font-size: calc(0.35 * 6vh);
	margin-bottom: 1vh;
	color: var(--black);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: env(safe-area-inset-top);
	margin-left: env(safe-area-inset-left);
}
.user-settings #refreshButton {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: transparent;
	width: 6vh;
	height: 6vh;
	font-size: calc(0.4 * 6vh);
	margin-bottom: 1vh;
	color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: env(safe-area-inset-top);
	margin-right: env(safe-area-inset-right);
}
.user-settings i {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.user-settings #topUserContainer {
	position: relative;
	width: 100vw;
	height: 24vh;
	background-color: var(--green);
	padding-top: env(safe-area-inset-top);
}
.user-settings #topUserContainer #footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 12vh;
	object-fit: cover;
	opacity: 70%;
}
.user-settings #topUserContainer #backButton {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 6vh;
	height: 6vh;
	font-size: calc(0.35 * 6vh);
	margin-bottom: 1vh;
	border-radius: 999px;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}
.user-settings #topUserContainer i {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.user-settings #topUserContainer #userImage {
	background-color: var(--black);
	border-radius: 999px;
	width: 22vh;
	height: 22vh;
	position: absolute;
	top: calc(65% - (22vh / 2));
	left: calc(50% - (22vh / 2));
	display: flex;
	justify-content: center;
	align-items: center;
}
.user-settings #topUserContainer #userImage #userInitialsSettings {
	font-size: 8vh;
	color: var(--white);
}
.user-settings #topUserContainer #bottomCard {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3dvh;
	background-color: var(--white);
	border-radius: 3dvh 3dvh 0 0;
}
.user-settings #userName {
	width: 100%;
	text-align: center;
	font-size: larger;
	margin-top: 5vh;
}
.user-settings #balanceAndBonusContainer {
	width: 100vw;
	height: 12vh;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2vh;
	margin-top: 5vh;
}
.user-settings #balanceAndBonusContainer #balanceContainer,
.user-settings #balanceAndBonusContainer #bonusContainer {
	width: 42.5%;
	height: 100%;
	color: var(--green);
	border-radius: 25px;
	display: flex;
	justify-content: center;
	position: relative;
	/*outline: 1px solid var(--green);*/
	box-shadow:
		0px 1px 6px 0px var(--green),
		0px 0px 5px 0px var(--shadow-green) inset;
}
.user-settings #balanceAndBonusContainer #balanceContainer #balanceLabel,
.user-settings #balanceAndBonusContainer #bonusContainer #bonusLabel {
	position: absolute;
	top: 8%;
}
.user-settings #balanceAndBonusContainer #balanceContainer #balance,
.user-settings #balanceAndBonusContainer #bonusContainer #bonus {
	position: absolute;
	bottom: 20%;
	font-size: 1.5rem;
}
.user-settings #subscriptionContainer {
	width: 100vw;
	height: 12vh;
	margin-top: 3vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.user-settings #subscriptionContainer div:first-child {
	width: calc(85vw + 2vh);
	height: 100%;
	color: var(--green);
	border-radius: 25px;
	display: flex;
	position: relative;
	/*outline: 1px solid var(--green);*/
	box-shadow:
		0px 1px 6px 0px var(--green),
		0px 0px 5px 0px var(--shadow-green) inset;
}
.user-settings #subscriptionContainer div #cardSVG {
	position: absolute;
	height: 6vh;
	width: 6vh;
	font-size: 6vh;
	top: calc((100% - 6vh - 1.5rem)/2);
	left: calc(25% - 3vh);
}
.user-settings #subscriptionContainer div #subscriptionName {
	position: absolute;
	left: 5%;
	width: 40%;
	top: calc(6vh + 0.75rem);
	text-align: center;
}
.user-settings #subscriptionContainer div #subscriptionValidity {
	position: absolute;
	right: 5%;
	width: 40%;
	align-self: center;
	text-align: center;
	text-wrap: pretty;
	font-size: 1.2rem;
}
.user-settings #statisticsMenuButtonContainer,
.user-settings #tripHistoryButtonContainer,
.user-settings #issueButtonContainer {
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3vh;
}
.user-settings #statisticsMenuButton,
.user-settings #tripHistoryButton,
.user-settings #issueButton {
	width: calc(85vw + 2vh - 5dvh);
	padding: 2dvh 3dvh;
	background-color: var(--green);
	border-radius: 999px;
	color: var(--white);
	display: flex;
	align-items: center;
	gap: 1dvh;
	box-shadow: 0px 1px 6px 0px var(--green),
}
.user-settings #issueButton {
	background-color: var(--dark-gray);
}
.user-settings #statisticsMenuButton i,
.user-settings #tripHistoryButton i,
.user-settings #issueButton i {
	font-size: 1.5rem;
}
.user-settings #settingsContainer {
	width: 100vw;
	height: fit-content;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 3vh;
	margin-top: 3vh;
}
.user-settings #settingsContainer #proxy {
	width: calc(85vw + 2vh);
	height: 16vh;
	color: var(--green);
	border-radius: 25px;
	display: flex;
	justify-content: center;
	position: relative;
	/*outline: 1px solid var(--green);*/
	box-shadow:
		0px 1px 6px 0px var(--green),
		0px 0px 5px 0px var(--shadow-green) inset;
}

.user-settings #settingsContainer #proxy > div:first-child {
	width: 100%;
	position: absolute;
	z-index: 2;
	left: 0;
	top: 8%;
	text-align: center;
}

.user-settings #settingsContainer #proxy #proxyUrlInput {
	background-color: rgb(255, 255, 255);
	width: 85%;
	height: 40%;
	position: absolute;
	left: 5%;
	top: 35%;
	outline: 1px solid var(--green);
	border-radius: 999px;
	display: flex;
	align-items: center;
	padding: 0;
	padding-left: 5%;
	color: var(--green);
	border: none;
	font-size: medium;
}

.user-settings #settingsContainer #proxy #resetProxyButton {
	background-color: var(--black);
	position: absolute;
	right: 13%;
	top: 35%;
	height: 40%;
	width: 20%;
	padding-left: 5%;
	text-align: center;
	border-radius: 999px 0 0 999px;
	color: white;
	font-size: large;
	display: flex;
	justify-content: left;
	align-items: center;
}

.user-settings #settingsContainer #proxy #setProxyButton {
	background-color: var(--green);
	position: absolute;
	right: 5%;
	top: 35%;
	height: 40%;
	aspect-ratio: 1/1;
	text-align: center;
	border-radius: 999px;
	color: white;
	font-size: large;
	display: flex;
	justify-content: center;
	align-items: center;
}

.user-settings #settingsContainer #distanceToStation {
	width: calc(85vw + 2vh);
	height: 16vh;
	color: var(--green);
	border-radius: 25px;
	display: flex;
	justify-content: center;
	position: relative;
	/*outline: 1px solid var(--green);*/
	box-shadow:
		0px 1px 6px 0px var(--green),
		0px 0px 5px 0px var(--shadow-green) inset;
}

.user-settings #settingsContainer #distanceToStation > div:first-child {
	width: 100%;
	position: absolute;
	z-index: 2;
	left: 0;
	top: 8%;
	text-align: center;
}

.user-settings #settingsContainer #distanceToStation #distanceToStationSelector {
	appearance: none;
	-webkit-appearance: none;
	width: 90%;
	height: 40%;
	font-size: 1rem;
	padding: 0.675em 6em 0.675em 1em;
	background-color: var(--white);
	border: 1px solid var(--green);
	border-radius: 999px;
	color: var(--green);
	cursor: pointer;
	background-image: url("images/caret-down.svg");
	background-repeat: no-repeat;
	background-position-x: calc(100% - 10px);
	background-position-y: calc(100% - 14px);
	position: absolute;
	left: 5%;
	top: 35%;
}

.user-settings #settingsContainer #devMode {
	width: calc(85vw - 2vh);
	padding: 2vh;
	color: var(--green);
	border-radius: 25px;
	display: flex;
	justify-content: center;
	position: relative;
	/*outline: 1px solid var(--green);*/
	box-shadow:
		0px 1px 6px 0px var(--green),
		0px 0px 5px 0px var(--shadow-green) inset;
	justify-content: space-between;
}

.user-settings #settingsContainer #devMode input[type="checkbox"] {
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	/* Remove most all native input styles */
	appearance: none;
	/* For iOS < 15 */
	background-color: var(--form-background);
	/* Not removed via appearance */
	margin: 0;
  
	font: inherit;
	color: currentColor;
	width: 1.5em;
	height: 1.5em;
	border: 0.15em solid currentColor;
	border-radius: 0.15em;
  
	display: grid;
	place-content: center;
}
  
.user-settings #settingsContainer #devMode input[type="checkbox"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	transform: scale(0);
	transform-origin: bottom left;
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--green);
	/* Windows High Contrast Mode */
	background-color: CanvasText;
}

.user-settings #settingsContainer #devMode input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.user-settings #settingsContainer #devMode input[type="checkbox"]:disabled {
	--form-control-color: var(--gray);

	color: var(--gray);
	cursor: not-allowed;
}

#bottom {
	margin-top: 3vh;
	display: flex;
	width: 100vw;
	margin-bottom: 5vw;
}
.user-settings #versionNumber {
	padding: 10px 10px;
	color: var(--black);
	font-size: large;
	margin-left: 5vw;
}
.user-settings #logoutButton {
	padding: 10px 40px;
	background-color: var(--black);
	border-radius: 999px;
	color: white;
	font-size: large;
	margin-left: auto;
	margin-right: 5vw;
}

.user-settings #proxyNotWorking {
	text-decoration: underline;
	color: var(--green);
	position: absolute;
	bottom: 5vw;
	right: 5vw;
}
/* #endregion */

/* #region Place search menu */
.place-search-menu {
	background-color: transparent;
	width: 90%;
	min-height: 15vh;
	max-height: 45vh;
	position: absolute;
	z-index: 1;
	left: 5%;
	bottom: calc(2vh + 7vh/2);
	border-radius: 30px 30px 0 0;
	animation: smooth-appear 0.5s ease forwards;
	margin-left: env(safe-area-inset-left);
	-webkit-backdrop-filter: blur(1rem);
	backdrop-filter: blur(1rem);
	box-shadow: 0px 1px 6px 0px var(--gray);
}
.place-search-menu #placeList {
	position: relative;
	padding: 0;
	width: 100%;
	margin-top: 0;
	list-style-type: none;
	max-height: calc(45vh - 2rem - 0.6rem);
	overflow: scroll;
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 0.6rem;
	padding-top: 0;
	padding-bottom: 2rem;
}
.place-search-element {
	background-color: var(--white);
	border-radius: 999px;
	padding: 15px 25px;
	position: relative;
	margin-bottom: 10px;
	color: var(--dark-gray);
	width: calc(95% - 25 * 2px - 2 * 2px);
	box-shadow: 0px 1px 6px 0px var(--gray);
}
.place-search-element:hover {
	background-color: var(--green);
	color: #ffffff;
	cursor: pointer;
}
.place-search-element .detail {
	color: var(--medium-gray);
	font-size: 0.75rem;
	line-height: 0.75rem;
}
.place-search-element:hover .detail {
	color: var(--gray);
}
.place-search-menu #startNavigationButton {
	position: absolute;
	top: -8dvh;
	right: 0;
	background-color: var(--glass-black);
	border-radius: 999px;
	color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 6dvh;
	width: 6dvh;
	box-shadow: 0px 4px 6px 0px var(--shadow-black);
	backdrop-filter: blur(1rem);
	-webkit-backdrop-filter: blur(1rem);
}
.place-search-menu #startNavigationButton:hover {
	cursor: pointer;
}
.place-search-menu #startNavigationButton i {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 180%;
}
.place-search-menu #routeDetails {
	position: absolute;
	top: -8dvh;
	left: 0;
	background-color: var(--glass-black);
	border-radius: 999px;
	color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 6vh;
	padding: 0 2dvh;
	font-size: 0.8rem;
	box-shadow: 0px 4px 6px 0px var(--shadow-black);
	backdrop-filter: blur(1rem);
	-webkit-backdrop-filter: blur(1rem);
}
.place-search-menu #spinner {
	position: absolute;
	top: 0;
	left: 37.5%;
	width: 25%;
	object-fit: contain;
}
/* #endregion */

/* #region Rotate screen notice */
.rotate-screen-notice {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--green);
	z-index: 99;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.rotate-screen-notice #phone {
	height: 50px;
	width: 100px;
	border: 3px solid white;
	border-radius: 10px;
	animation: rotate 1.5s ease-in-out infinite alternate;
	display: block;
}

.rotate-screen-notice #message {
	color: white;
	font-size: 1em;
	margin-top: 40px;
	display: block;
	max-width: 60%;
	text-wrap: wrap;
	text-align: center;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-90deg);
	}
	100% {
		transform: rotate(-90deg);
	}
}
/* #endregion */

/* #region Navigation information panel landscape */
#navigationInfoPanel {
	position: absolute;
	bottom: 2vh;
	left: 2vh;
	width: fit-content;
	height: fit-content;
	color: white;
	z-index: 16;
	display: flex;
	align-items: center;
	justify-content: right;
	flex-direction: column;
	margin-left: env(safe-area-inset-left);
}
#navigationInfoPanel #costAndTimeContainer {
	background-color: var(--green);
	border-radius: 30px;
	padding: 2vh;
	padding-bottom: 8vh;
	margin-bottom: -6vh;
	font-size: 0.9rem;
}
#navigationInfoPanel #speedContainer {
	background-color: var(--white);
	color: var(--black);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	aspect-ratio: 1/1;
	width: 70%;
	margin: auto;
	border: 1px solid var(--green);
}
#navigationInfoPanel #speedContainer #speed {
	font-size: 2rem;
}
#navigationInfoPanel #speedContainer #speedLabel {
	font-size: 0.75rem;
 	margin-top: -0.5rem;
}
#changeRotationModeButton {
	height: 4rem;
	width: 4rem;
	background-color: var(--green);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	z-index: 20;
	position: absolute;
	bottom: 2dvh;
	right: 2dvh;
	font-size: 2.5rem;
	line-height: 2rem;
	color: var(--black);
	margin-right: env(safe-area-inset-right);
}
#changeRotationModeButton img {
	height: 2.5rem;
	width: 2.5rem;
	object-fit: contain;
}
#endNavigationButton {
	height: 4rem;
	width: 4rem;
	background-color: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	z-index: 20;
	position: absolute;
	bottom: calc(2dvh + 1dvh + 4rem);
	right: 2dvh;
	font-size: 2.5rem;
	line-height: 2rem;
	color: var(--green);
	margin-right: env(safe-area-inset-right);
}
#reachedFinalStation {
	height: 8%;
	position: absolute;
	bottom: 2%;
	right: 1%;
	background-color: var(--green);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: 10px 15px;
	z-index: 16;
	color: white;
}
/* #endregion */

/* #region Navigation information panel portrait */
#onBikeButton {
	height: 3.5rem;
	position: absolute;
	bottom: 2vh;
	left: 2vh;
	background-color: var(--green);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: 0 1.5rem;
	z-index: 11;
	color: white;
}
/* #endregion */

/* #region Rate trip menu */
.rate-trip-menu {
	background-color: rgba(35, 31, 32, 0.9);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}
#rateTripMenuCard {
	background-color: white;
	width: calc(100% - 14dvh);
	height: fit-content;
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 20px 20px 0 0;
	padding: 2dvh 7dvh 10dvh 7dvh;
}
#rateTripMenuCard #backButton {
	position: absolute;
	top: 2dvh;
	left: 2dvh;
	font-size: calc(2dvh);
	color: var(--green)
}
#rateTripMenuCard #tripInfo {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
#rateTripMenuCard #tripInfo #bikeName,
#rateTripMenuCard #tripInfo #date,
#rateTripMenuCard #tripInfo #time,
#rateTripMenuCard #tripInfo #cost,
#rateTripMenuCard #tripInfo #points {
	color: var(--black);
	font-size: 1rem;
	display: flex;
	flex-direction: row;
}
#rateTripMenuCard #tripInfo #bikeName #bikeIcon {
	max-width: 1em;
	object-fit: contain;
}
#rateTripMenuCard #tripInfo #bikeName #bikeIcon,
#rateTripMenuCard #tripInfo i {
	margin-right: 1dvh;
	color: var(--green);
}
#rateTripMenuCard #stationImg {
	position: absolute;
	top: 3dvh;
	right: 3dvh;
	width: 25%;
}
#rateTripMenuCard #ratingLabel {
	margin-top: 3dvh;
	width: 100%;
	text-align: center;
}
#rateTripMenuCard #ratingFormContainer {
	margin-top: 1dvh;
	margin-bottom: 3dvh;
	width: 100%;
	height: 15vw;
	display: flex;
	justify-content: center;
	align-items: center;
}
#rateTripMenuCard .ratingFormContainer {
    display: flex;
    justify-content: center;
}
#rateTripMenuCard .rating {
    display: flex;
    flex-direction: row-reverse;
	line-height: 15vw;
	font-size: 4vw;
	position: relative;
}
#rateTripMenuCard .rating .star {
    font-size: 3.5rem;
    color: black;
    cursor: pointer;
    transition: color 0.3s;
}
/* Change color up to the selected star */
#rateTripMenuCard .rating input[type="radio"]:checked ~ .star {
    color: var(--green);
}
/* Hide the radio buttons */
#rateTripMenuCard .rating input[type="radio"] {
    display: none;
}
#rateTripMenuCard #sendButton {
	background-color: var(--green);
	width: 30vw;
	height: 6dvh;
	position: absolute;
	z-index: 2;
	right: 3dvh;
	bottom: 3dvh;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-weight: bold;
}
#rateTripMenuCard #sendButton:focus {
	cursor: pointer;
}
#rateTripMenuCard #ignoreButton {
	background-color: var(--black);
	width: 30vw;
	height: 6dvh;
	position: absolute;
	z-index: 2;
	left: 3dvh;
	bottom: 3dvh;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-weight: bold;
}
#rateTripMenuCard #commentTextarea {
	width: calc(100vw - 2*3dvh - 2*2dvh);
	height: 10dvh;
	outline: 1px solid var(--green);
	border: none;
	border-radius: 15px;
	display: block;
	padding: 1dvh 2dvh;
	color: var(--black);
	resize: none;
	font-family: inherit;
   	font-size: inherit;
	margin-left: -4dvh;
	margin-bottom: 1dvh;
	margin-top: 1dvh;
}
#rateTripMenuCard #title {
	color: var(--green);
	font-weight: 600;
	margin-left: -4dvh;
	font-size: 1.1rem;
}
/* #endregion */

/* #region Take unregistered bike */
#openTakeUnregisteredBikeButton {
	background-color: var(--black);
	color: var(--white);
	border-radius: 30px;
	padding: 2vh;
	position: relative;
	margin-bottom: 10px;
	cursor: pointer;
	text-align: center;
	height: 15vh;
	margin: 2vh 0;
	flex-shrink: 0;
	width: calc(90vw - 4vh - env(safe-area-inset-left) - env(safe-area-inset-right));
	box-shadow: 0px 1px 6px 0px var(--black);
	margin-left: env(safe-area-inset-left);
	margin-right: env(safe-area-inset-right);
}
#openTakeUnregisteredBikeButton #upperText {
	position: absolute;
	top: 2vh;
	left: 3vh;
	text-align: left;
}
#openTakeUnregisteredBikeButton #lowerText {
	position: absolute;
	bottom: 2vh;
	left: 3vh;
	text-align: left;
	font-weight: bold;
	font-size: 1.15rem;
}
#openTakeUnregisteredBikeButton img {
	position: absolute;
	bottom: 2vh;
	right: 2vh;
	height: 13vh;
	object-fit: contain;
}
#takeUnregisteredBike {
	z-index: 5;
	position: absolute;
	bottom: 2vh;
	left: 5%;
	width: 90%;
	height: 20%;
	background-color: var(--white);
	border-radius: 20px;
	box-shadow: 5px 5px 15px 0px var(--shadow-black);
}
#takeUnregisteredBike #unregisteredBikeNameInputContainer {
	background-color: rgb(255, 255, 255);
	width: 90%;
	height: 30%;
	position: absolute;
	z-index: 2;
	left: 5%;
	top: 15%;
	outline: 1px solid var(--green);
	border-radius: 999px;
	display: flex;
	align-items: center;
	color: var(--green);
	border: none;
	font-size: 0.9rem;
}
#takeUnregisteredBike #unregisteredBikeNameSelect {
	background-color: rgb(255, 255, 255);
	display: flex;
	color: var(--green);
	border: none;
	font-size: 0.9rem;
	padding-left: 5%;
}
/* Hide Arrows */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
#takeUnregisteredBike #unregisteredBikeNameInput {
	background-color: rgb(255, 255, 255);
	width: 100%;
	height: 100%;
	border-radius: 999px;
	display: flex;
	align-items: center;
	padding-left: 0.5rem;
	color: var(--green);
	border: none;
	font-size: 0.9rem;
}
#takeUnregisteredBike #unregisteredBikeNameInput:focus {
	outline: none;
}
#takeUnregisteredBike #cancelButton {
	background-color: var(--black);
	width: 30%;
	height: 28%;
	position: absolute;
	z-index: 2;
	left: 5%;
	bottom: 15%;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 0.9rem;
}
#takeUnregisteredBike #takeUnregisteredBikeButton {
	background-color: var(--green);
	width: 55%;
	height: 30%;
	position: absolute;
	z-index: 2;
	right: 5%;
	bottom: 15%;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 0.9rem;
}
/* #endregion */

/* #region Custom alert box */
#modalContainer {
	background-color: rgba(0, 0, 0, 0.3);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

#alertBox {
	width: 80%;
	min-height: 10%;
	border-radius: 20px;
	background-color: #fff;
	padding: 1rem;
}

#modalContainer > #alertBox {
	position: fixed;
}

#alertBox img {
	max-width: 100%;
}

#alertBox #title {
	color: var(--green);
	font-weight: bold;
	font-size: 1.2rem;
	display: block;
	margin-top: 0.5rem;
	margin-left: 0.5rem;
}

#alertBox p {
	padding: 0.5rem;
	margin: 0;
	font-size: 0.9rem;
}

#alertBox #customTextPromptInput {
	width: calc(100% - 4dvh - 20px - 6px);
	height: 10dvh;
	outline: 1px solid var(--green);
	border: none;
	border-radius: 15px;
	display: block;
	padding: 1dvh 2dvh;
	color: var(--green);
	font-size: medium;
	margin: 10px;
	margin-left: 13px;
	resize: none;
}

#alertBox #closeBtn {
	display: block;
	position: relative;
	width: 20%;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	background-color: var(--green);
	border-radius: 999px;
	float: right;
	margin-bottom: 10px;
	margin-right: 10px;
	padding: 10px 40px;
	margin-top: 1rem;
}
#alertBox #yesBtn {
	display: block;
	position: relative;
	width: 30%;
	text-align: center;
	color: #fff;
	background-color: var(--green);
	border-radius: 999px;
	float: left;
	padding: 10px 20px;
	margin-top: 1rem;
}
#alertBox #noBtn {
	display: block;
	position: relative;
	width: 30%;
	text-align: center;
	color: #fff;
	background-color: var(--black);
	border-radius: 999px;
	float: right;
	padding: 10px 20px;
	margin-top: 1rem;
}
#alertBox ul {
	padding-left: 20px;
}
#alertBox li {
	margin-top: 0.5rem;
	font-size: 0.8rem;
}
/* #endregion */

/* #region Trip history */
#tripHistory {
	background-color: var(--white);
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 4;
	left: 0;
	top: 0;
	border-radius: 0;
	/*animation: smooth-slide-from-bottom 1s ease forwards;*/
}
#tripHistory #graphics {
	height: 25vw;
	width: 100%;
	object-fit: cover;
	rotate: 180deg;
	opacity: 5%;
}
#tripHistory #backButton {
	position: absolute;
	top: 2.5dvh;
	left: 5%;
	font-size: calc(0.35 * 7dvh);
	margin-bottom: 1dvh;
	border-radius: 999px;
	color: var(--green);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: env(safe-area-inset-top);
	margin-left: env(safe-area-inset-left);
}
#tripHistory #backButton i {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#tripHistory #title {
	position: absolute;
	top: 2.5dvh;
	right: 5%;
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--green);
	margin-top: env(safe-area-inset-top);
}
#tripHistory #downloadTripHistoryButton {
	position: absolute;
	bottom: 2.5vh;
	right: 2.5vh;
	width: 8vh;
	height: 8vh;
	background-color: var(--green);
	font-size: 1.75rem;
	border-radius: 999px;
	color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
}
#tripHistory #downloadTripHistoryButton i {
	display: flex;
	justify-content: center;
	align-items: center;
}
#tripHistory #listGradient {
	position: absolute;
	top: 8vh;
	left: 0;
	width: 100%;
	height: 1.2vh;
	background: linear-gradient(180deg, #fff 0%, transparent 100%);
	z-index: 2;
}
#tripHistory #tripList {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	list-style-type: none;
	padding: 0;
	margin: 0;
	max-height: calc(90% - env(safe-area-inset-top));
	overflow: scroll;
	padding-top: 2vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.trip-list-element {
	background-color: var(--white);
	border-radius: 30px;
	position: relative;
	margin-bottom: 2vh;
	/*border: 1px solid var(--green);*/
	box-shadow:
		0px 1px 6px 0px var(--green),
		0px 0px 5px 0px var(--shadow-green) inset;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 2.5dvh 2dvh;
	width: calc(90% - 4dvh);
}
.trip-list-element #tripInfo {
	width: fit-content;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.trip-list-element #tripInfo #bikeName,
.trip-list-element #tripInfo #date,
.trip-list-element #tripInfo #time,
.trip-list-element #tripInfo #cost,
.trip-list-element #tripInfo #points {
	color: var(--black);
	font-size: 0.9rem;
	display: flex;
	flex-direction: row;
}
.trip-list-element #tripInfo #bikeName #bikeIcon {
	max-width: 1em;
	object-fit: contain;
}
.trip-list-element #tripInfo #bikeName #bikeIcon,
.trip-list-element #tripInfo i {
	margin-right: 1dvh;
	color: var(--green);
}
.trip-list-element #tripStations {
	margin-left: auto;
	position: relative;
	align-self: stretch;
	display: flex;
	align-content: center;
}
.trip-list-element #tripStations img {
	max-width: 50vw;
	object-fit: contain;
}
.trip-list-element #tripStations #startStation {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 0.7rem;
	width: 85%;
	text-align: left;
}
.trip-list-element #tripStations #endStation {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 0.7rem;
  	width: 80%;
	text-align: right;
}
#tripHistorySpinner {
	display: inline-block;
	width: 100px;
	height: 100px;
	object-fit: contain;
}
/* #endregion */

/* #region Statistics menu */
#statisticsMenu {
	background-color: var(--black);
	width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
	height: fit-content;
	position: absolute;
	z-index: 4;
	left: 0;
	top: 0;
	border-radius: 0;
	/*animation: smooth-slide-from-bottom 1s ease forwards;*/
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}
#statisticsMenu #graphics {
	position: absolute;
	top: 0;
	left: 0;
	height: 25vw;
	width: 100%;
	object-fit: cover;
	rotate: 180deg;
	opacity: 2%;
}
#statisticsMenu #backButton {
	position: absolute;
	top: 2.5dvh;
	left: 5%;
	font-size: calc(0.35 * 7dvh);
	margin-bottom: 1dvh;
	border-radius: 999px;
	color: var(--green);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: env(safe-area-inset-top);
	margin-left: env(safe-area-inset-left);
}
#statisticsMenu #backButton i {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#statisticsMenu #title {
	position: absolute;
	top: 2.5dvh;
	right: 5%;
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--green);
	margin-top: env(safe-area-inset-top);
	margin-right: env(safe-area-inset-right);
}
#statisticsMenu #usableArea {
	width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
	min-height: calc(100dvh - 8dvh);
	display: flex;
	flex-direction: column;
	gap: 2dvh;
	margin-top: calc(8dvh + env(safe-area-inset-top));
}
#statisticsMenu .chart-container {
	position: relative;
	width: 100%;
	flex-grow: 1;
}
#statisticsMenu #statsControls {
	width: 100%;
	height: fit-content;
	background-color: var(--white);
	border-radius: 30px 30px 0 0;
	padding-bottom: 4dvh;
}
#statisticsMenu #statsControls select {
	appearance: none;
	-webkit-appearance: none;
	width: 90%;
	margin-left: 5%;
	font-size: 1rem;
	padding: 0.675em 6em 0.675em 1em;
	background-color: var(--white);
	border: 1px solid var(--green);
	border-radius: 999px;
	color: var(--green);
	cursor: pointer;
	background-image: url("images/caret-down.svg");
	background-repeat: no-repeat;
	background-position-x: calc(100% - 10px);
	background-position-y: calc(100% - 14px);
}
#statisticsMenu #statsControls .stats-control-label {
	width: 90%;
	margin-left: calc(5% + 1em);
	font-size: 0.9rem;
	color: var(--green);
	margin-top: 3dvh;
}
#statisticsMenu #statsTotals {
	width: 100%;
	height: calc(6dvh + 1rem);
	display: flex;
	gap: 1dvh;
  	justify-content: center;
}
#statisticsMenu #statsTotals .stats-totals-element {
	width: 30vw;
	height: calc(6dvh + 1rem);
}
#statisticsMenu #statsTotals .stats-totals-element div:first-child {
	width: 100%;
	height: 6dvh;
	border-radius: 999px;
	background-color: var(--green);
	color: var(--white);
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
#statisticsMenu #statsTotals .stats-totals-element div:nth-child(2) {
	width: 100%;
	height: 1rem;
	color: var(--green);
	font-size: 0.75rem;
	text-align: center;
}
/* #endregion */

/* #region Dev Info */
#devInfo {
	position: absolute;
	top: 0;
	left: 0;
	height: 2rem;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	z-index: 99;
	background-color: var(--white);
	color: var(--black);
	display: none;
}
#devInfo div {
	flex: 1;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* #endregion */

@media (orientation: landscape) {

	/* #region Animations and Transitions */

	/* appear from bottom animations */
	@keyframes smooth-appear {
		from {
			bottom: -35%;
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	/* Zoom controls animations */
	@keyframes smooth-slide-up-zoom-controls {
		to {
			bottom: calc(100vh - 22vw);
		}
	}
	@keyframes smooth-slide-down-zoom-controls {
		from {
			bottom: calc(100vh - 22vw);
		}
		to {
			bottom: calc(2vw + 7vw + 2vw);
		}
	}

	@keyframes smooth-slide-top-zoom-controls {
		to {
			bottom: calc(100vh - 22vw);
		}
	}
	@keyframes smooth-slide-bottom-zoom-controls {
		from {
			bottom: calc(100vh - 22vw);
		}
		to {
			bottom: calc(2vw + 7vw + 2vw);
		}
	}

	/* Search bar appear animations */
	@keyframes slide-fwd-top {
		from {
			-webkit-transform: translateZ(-12dvw) translateY(10dvw);
			transform: translateZ(-12dvw) translateY(10dvw);
		}
		to {
			-webkit-transform: translateZ(0) translateY(0);
			transform: translateZ(0) translateY(0);
		}
	}
	@keyframes slide-back-top {
		from {
			-webkit-transform: translateZ(0) translateY(0);
			transform: translateZ(0) translateY(0);
		}
		to {
			-webkit-transform: translateZ(-12dvw) translateY(10dvw);
			transform: translateZ(-12dvw) translateY(10dvw);
		}
	}

	/* #endregion */

	/* #region Logo */
	#logo {
		width: 18%;
		left: 2vw;
		bottom: 2vw;
	}
	/* #endregion */

	/* #region Zoom controls */
	#zoomControls {
		right: 2vw;
		bottom: calc(2vw + 7vw + 2vw);
		gap: 1vw;
	}
	#zoomControls div {
		background-color: var(--green);
		width: 6vw;
		height: 6vw;
		font-size: calc(0.2 * 20vw);
		border-radius: 999px;
		color: white;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	#zoomControls div i {
		width: 32px;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* #endregion */

	/* #region Search bar */
	#searchBarDiv {
		width: 40vw;
		height: 7vw;
		bottom: 2vw;
		left: 2vw;
	}
	#searchBarCancelButton {
		left: 0;
		bottom: 0;
		width: 6vw;
		height: 7vw;
	}
	#searchBar {
		width: calc(40vw - 6vw);
		height: 7vw;
		left: 6vw;
		bottom: 0;
	}
	/* #endregion */

	/* #region Navigation Button */
	#navigationButton {
		width: 7vw;
		height: 7vw;
		right: calc(2vw + 7vw + 2vw);
		bottom: 2vw;
	}
	#navigationButton img {
		width: 4vw;
		height: 4vw;
	}
	/* #endregion */

	/* #region User picture */
	#userPicture {
		width: 7vw;
		height: 7vw;
		right: 2vw;
		bottom: 2vw;
	}
	#userPicture #userInitials {
		font-size: 3dvw;
		color: var(--green);
	}
	/* #endregion */

	/* #region Station card */
	.station-card {
		width: 90vh;
		height: 55vh;
		left: 2vw;
		bottom: 2vw;
	}
	.station-card #stationIDandDistanceContainer {
		width: calc(100% - 17.5vh);
		left: 5vh;
		top: 4vh;
	}
	.station-card #stationName {
		width: calc(100% - 17.5vh);
		left: 5vh;
		top: calc(4vh + 1rem + 0.2rem);
	}
	.station-card #docksImage {
		left: 5vh;
		bottom: calc(5vh + 20% + 2vh);
	}
	.station-card #docksButton {
		left: 5vh;
		bottom: 5vh;
	}
	.station-card #bikesImage {
		right: 5vh;
		bottom: calc(5vh + 20% + 2vh);
	}
	.station-card #bikesButton {
		right: 5vh;
		bottom: 5vh;
	}
	.station-card #bikesButtonDisabled {
		right: 5vh;
		bottom: 5vh;
	}
	.station-card #navigateToButton {
		right: 5vh;
		top: 5vh;
	}
	.station-card #startNavigationButton {
		top: -8vw;
		right: 0;
		height: 6vw;
		width: 6vw;
	}
	.station-card #routeDetails {
		top: -8vw;
		left: 0;
		height: 6vw;
		padding: 0 2dvw;
	}
	/* #endregion */

	/* #region Login menu */
	#loginCard #logo {
		position: absolute;
		top: calc(-15.625% - 14vh); /* the -15.625 is calculated using the aspect ratio of the logo (800x250) */
		width: 30%;
		left: 35%;
	}
	#loginCard {
		height: 50vh;
	}
	#loginCard input {
		height: 10vh;
	}
	#loginCard input[name="password"] {
		top: calc(10% + 10vh + 10px + 2dvh);
	}
	#registerButton,
	#loginButton {
		height: 10vh;
	}
	/* #endregion */

	/* #region Bike list */
	.bike-list #backButton {
		width: 7vw;
		height: 7vw;
		font-size: calc(0.35 * 7vw);
	}
	.bike-list #stationIDandDistanceContainer {
		width: calc(100% - 7vw - 10px - 5%);
		left: calc(10px + 7vw);
		top: 3vw;
	}
	.bike-list #stationName {
		width: calc(100% - 7vw - 10px - 5%);
		left: calc(10px + 7vw);
		top: calc(3vw + 1rem + 0.2rem);
	}
	.bike-list #listGradient {
		top: 20vh;
	}
	.bike-list #bikeList {
		top: 20vh;
		max-height: calc(100dvh - 20vh - 2vh);
	}
	.bike-list-element {
		height: 7vw;
	}
	.bike-list-element #content #bikeIcon {
		height: 4vw;
	}
	.bike-list-element #content #reserveBikeIcon {
		font-size: 3dvw;
	}
	/* #endregion */

	/* #region Bike reserve */
	#bikeReserveCard {
		height: 70%;
	}
	#bikeReserveCard #backButton {
		width: 6vw;
		height: 6vw;
		font-size: calc(0.35 * 8vw);
		margin-bottom: 1vw;
	}
	#bikeReserveCard #textContent {
		position: absolute;
		top: 20px;
		left: calc(6vw + 20px);
		width: calc(80% - 20px - 20px);
		display: flex;
		flex-direction: column;
	}
	#bikeReserveCard #unlockSlider {
		appearance: none;
		background-color: var(--black);
		width: 90%;
		height: 20%;
		position: absolute;
		left: 5%;
		bottom: 10%;
		border-radius: 999px;
		z-index: 4;
	}
	#bikeReserveCard #unlockSlider::-webkit-slider-thumb {
		-webkit-appearance: none;
		height: calc(0.2 * 35vh);
		width: 45vw;
		border-radius: 999px;
		background-color: var(--green);
		background-image: url("images/unlockSlider_PT.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		cursor: pointer;
	}
	#bikeReserveCard #unlockSlider::-moz-range-thumb {
		height: 100%;
		width: 50%;
		background-color: var(--green);
		cursor: pointer;
		border-radius: 999px;
		border: none;
		background-image: url("images/unlockSlider_PT.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	#bikeReserveCard #footer {
		height: 14dvw;
		object-position: center top;
	}
	.timer {
		bottom: 13dvw;
		left: calc(50vw - 8vw);
	}
	.timer > svg {
		width: 16vw;
		height: 16vw;
	}
	.timer > svg > circle {
		stroke-width: 1.5vw;
		r: 7.25vw;
	}
	#bikeReserveCard #bikeLeavingDock {
		width: 60%;
		aspect-ratio: 1/1;
		object-fit: contain;
		position: absolute;
		left: 40%;
		bottom: -40%;
	}
	/* #endregion */

	/* #region Trip overlay */
	.trip-overlay {
		width: calc(35% - 4vw);
		height: 20dvw;
		top: 2vw;
		left: 2vw;
	}
	.trip-overlay #onTripText {
		top: 2vw;
		left: 2vw;
		font-size: 1.75rem;
	}
	.trip-overlay #tripCost {
		bottom: 2vw;
		left: 2.5vw;
		font-size: 1rem;
	}
	.trip-overlay #tripTime {
		bottom: calc(2vw +  1rem + .2rem);
		left: 2.5vw;
		font-size: 1rem;
	}
	.trip-overlay #callAssistance {
		bottom: 1.5vw;
		right: 1.5vw;
		padding: 1.5vw;
	}
	/* #endregion */

	/* #region User menu */
	.user-settings #topUserContainer {
		height: 24vw;
	}
	.user-settings #topUserContainer #footer {
		height: 12vw;
		object-fit: cover;
		object-position: top center;
	}
	.user-settings #backButton, .user-settings #topUserContainer #backButton {
		width: 6vw;
		height: 6vw;
		font-size: calc(0.35 * 6vw);
	}
	.user-settings #topUserContainer #userImage {
		width: 22vw;
		height: 22vw;
		top: calc(65% - (22vw / 2));
		left: calc(50% - (22vw / 2));
	}
	.user-settings #topUserContainer #userImage #userInitialsSettings {
		font-size: 8vw;
	}
	.user-settings #topUserContainer #bottomCard {

		height: 3vw;
		border-radius: 3vw 3vw 0 0;
	}
	.user-settings #userName {
		margin-top: 5vw;
	}
	.user-settings #balanceAndBonusContainer {
		width: 100vw;
		height: 12vw;
		gap: 2vw;
		margin-top: 5vw;
	}
	.user-settings #balanceAndBonusContainer #balanceContainer,
	.user-settings #balanceAndBonusContainer #bonusContainer {
		width: 25%;
	}
	.user-settings #subscriptionContainer {
		height: 12vw;
		margin-top: 3vw;
	}
	.user-settings #subscriptionContainer div:first-child {
		width: calc(50vw + 2vw);
	}
	.user-settings #subscriptionContainer div #cardSVG {
		position: absolute;
		height: 6vw;
		width: 6vw;
		font-size: 6vw;
		top: 10px;
		left: calc(25% - 3vw);
	}
	.user-settings #subscriptionContainer div #subscriptionName {
		top: 7vw;
	}
	.user-settings #statisticsMenuButtonContainer,
	.user-settings #tripHistoryButtonContainer,
	.user-settings #issueButtonContainer {
		margin-top: 3vw;
	}
	.user-settings #statisticsMenuButton,
	.user-settings #tripHistoryButton,
	.user-settings #issueButton {
		width: calc(50vw + 2vw - 5vw);
		padding: 2vw 3vw;
		gap: 1vw;
	}
	.user-settings #settingsContainer {
		width: 100vw;
		height: fit-content;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 3vw;
		margin-top: 3vw;
	}
	.user-settings #settingsContainer #proxy {
		width: calc(50vw + 2vw);
		height: 16vw;
	}
	.user-settings #settingsContainer #proxy #resetProxyButton {
		right: 10%;
		height: 40%;
		width: 15%;
		padding-left: 3%;
	}
	.user-settings #settingsContainer #distanceToStation {
		width: calc(50vw + 2vw);
		height: 16vw;
	}
	.user-settings #settingsContainer #devMode {
		padding: 2vh;
		width: calc(50vw - 2vw);
		padding: 2vw;
	}
	#bottom {
		margin-top: 3vw;
		display: flex;
		width: 50vw;
		margin-bottom: 5vh;
		margin-left: 25vw;
	}
	.user-settings #versionNumber {
		margin-left: 0;
	}
	.user-settings #logoutButton {
		margin-right: 0;
	}

	.user-settings #proxyNotWorking {
		bottom: 5vh;
		right: 5vh;
	}
	/* #endregion */

	/* #region Place search menu */
	.place-search-menu {
		width: 40vw;
		min-height: 30vh;
		max-height: calc(100vh - 4rem);
		position: absolute;
		left: 2vw;
		bottom: calc(2vw + 7vw/2);
	}
	.place-search-menu #placeList {
		width: 100%;
		margin-left: 0;
		max-height: 50vh;
	}
	.place-search-menu #startNavigationButton {
		top: -15vh;
		right: 0;
		height: 6vw;
		width: 6vw;
	}
	.place-search-menu #routeDetails {
		top: -15vh;
		left: 0;
		height: 6vw;
	}
	/* #endregion */

	/* #region Rate trip menu */
	#rateTripMenuCard {
		height: 25%;
	}
	#rateTripMenuCard #backButton {
		top: 2vw;
		left: 2vw;
		width: 6vw;
		height: 6vw;
		font-size: calc(0.35 * 6vw);
		margin-bottom: 1vw;
	}
	#rateTripMenuCard #tripInfo {
		position: absolute;
		top: 5vh;
		left: calc(2vw + 6vw);
	}
	#rateTripMenuCard #stationImg {
		top: 3vw;
		right: 3vw;
		width: 10%;
	}
	#rateTripMenuCard #ratingLabel {
		position: absolute;
		bottom: calc(4vw + 7vw);
		left: 0;
	}
	#rateTripMenuCard #ratingFormContainer {
		position: absolute;
		bottom: 4vw;
		left: 0;
	}
	#rateTripMenuCard #ratingFormContainer .rating {
		line-height: 7vw;
		font-size: 7vw;
	}
	#rateTripMenuCard #sendButton {
		width: 40vh;
		height: 6vw;
		right: 1.5vw;
		bottom: 1.5vw;
	}
	/* #endregion */

	/* #region Take unregistered bike */
	#openTakeUnregisteredBikeButton {
		padding: 2vw;
		height: 15vw;
		margin: 2vw 0;
		/*width: calc(90vw - 4vw);*/
	}
	#openTakeUnregisteredBikeButton #upperText {
		top: 2vw;
		left: 3vw;
	}
	#openTakeUnregisteredBikeButton #lowerText {
		bottom: 2vw;
		left: 3vw;
	}
	#openTakeUnregisteredBikeButton img {
		bottom: 2vw;
		right: 2vw;
		height: 13vw;
	}
	#takeUnregisteredBike {
		height: 40%;
	}
	/* #endregion */
	
	/* #region Trip history */
	#tripHistory #backButton {
		top: 1vw;
		left: 2vw;
		width: 6vw;
		height: 6vw;
		font-size: calc(0.35 * 6vw);
		margin-bottom: 1vw;
	}
	#tripHistory #title {
		top: 3vw;
		right: 2vw;
	}
	#tripHistory #downloadTripHistoryButton {
		bottom: 2.5vw;
		right: 2.5vw;
		width: 8vw;
		height: 8vw;
	}
	#tripHistory #listGradient {
		top: 8vw;
	}
	#tripHistory #tripList {
		max-height: 80%;
	}
	.trip-list-element {
		margin-bottom: 2vw;
		padding: 2.5vw 2vw;
		width: calc(50% - 4vw);
	}
	.trip-list-element #tripStations img {
		max-width: 50vh;
	}
	/* #endregion */

	/* #region Statistics menu */
	#statisticsMenu #backButton {
		top: 1vw;
		left: 2vw;
		width: 6vw;
		height: 6vw;
		font-size: calc(0.35 * 6vw);
		margin-bottom: 1vw;
	}
	#statisticsMenu #title {
		top: 3vw;
	}
	#statisticsMenu #usableArea {
		margin-top: calc(8vw + env(safe-area-inset-top));
	}
	#statisticsMenu .chart-container {
		height: 55vh;
	}
	#statisticsMenu #statsControls {
		padding-bottom: 4vw;
		padding-top: 2vw;
	}
	#statisticsMenu #statsTotals {
		height: calc(6vw + 1rem);
		gap: 1.5vw;
	}
	#statisticsMenu #statsTotals .stats-totals-element {
		height: calc(6vw + 1rem);
	}
	#statisticsMenu #statsTotals .stats-totals-element div:first-child {
		height: 6vw;
	}
	/* #endregion */

	/* #region Navigation information panel landscape */
	#navigationInfoPanel {
		bottom: 2dvh;
		left: 2vw;
	}
	#navigationInfoPanel #costAndTimeContainer {
		padding: 2vw;
		padding-bottom: 15dvh;
		margin-bottom: -12dvh;
	}
	/* #endregion */
	
	/* #region Custom alert box */
	#alertBox {
		width: 40%;
		min-height: 10%;
	}
	#alertBox #title {
		color: var(--green);
		font-weight: bold;
		font-size: 1.2rem;
		display: block;
		margin-top: 1rem;
		margin-left: 1.5rem;
		margin-bottom: 0.75rem;
	}
	#alertBox p {
		padding: 1.5rem;
		margin: 0;
		font-size: 0.9rem;
	}
	/* #endregion */

}