:root {
	--application-color: #0093B2;
	--on-application-color: white;
	--application-color-light: #68b6c7;
	--on-application-color-light: white;
	--application-color-dark: #006c9a;
	--on-application-color-dark: white;
	--dark-text-color: #202124;

	/* State colors */
	--info-color: #3498db;
	--on-info-color: #fff;

	--success-color: #4caf50;
	--on-success-color: #fff;

	--warning-color: #f9a825;
	--on-warning-color: #000;

	--subtle-warning-color: #f8ffdb;
	--subtle-warning-border-color: #edc775;
	--on-subtle-warning-color: #000;

	--error-color: #e74c3c;
	--on-error-color: #fff;

	/******************************************************************************************/
	/* Other colors (mostly duplicates of already existing ones, so the IDE knows about them) */
	/******************************************************************************************/

	--accent-color: var(--application-color);
	--on-accent-color: var(--on-application-color);

	--underlying-color: var(--on-application-color);

	--primary-text-color: rgba(0, 0, 0, .87);
	--on-primary-text-color: white;

	--light-text-color: rgba(0, 0, 0, .56);
	--on-light-text-color: white;

	--disabled-text-color: #9b9b9b;
	--on-disabled-text-color: white;

	--primary-hover-color: #f5f5f5;
	--on-primary-hover-color: #333;

	--surface-color: white;
	--on-surface-color: var(--primary-text-color);

	--surface-darker-color: #eaeaea;
	--on-surface-darker-color: unset;

	--surface-lighter-color: white;
	--on-surface-lighter-color: var(--on-surface-color);

	--primary-border-color: #c7c7c7;
	--light-border-color: #e1e1e1;
	--on-light-border-color: var(--primary-text-color);
	--primary-background-color: #efefef;
	--on-primary-background-color: var(--primary-text-color);
	--primary-color: var(--application-color);
	--paper-input-container-label: {
		color: var(--application-color);
	};
	--paper-menu-background-color: var(--surface-color);
	--paper-menu-color: var(--on-surface-color);
	--on-paper-menu-background-color: var(--paper-menu-color);

	/**************************/
	/* Highly specific colors */
	/**************************/

	--button-color: var(--application-color);
	--on-button-color: var(--on-application-color);

	--chip-color: #e4e4e4;
	--on-chip-color: var(--light-text-color);

	--cluster-color: var(--application-color);
	--on-cluster-color: var(--on-application-color);
	--map-area-color: var(--application-color-light);

	--not-found-color1: #dcdcdc;
	--not-found-color2: var(--application-color);
	--not-found-color3: #b6e000;

	--link-color: var(--application-color-light);

	--vehicle-available-color: var(--success-color);
	--on-vehicle-available-color: var(--on-success-color);
	--vehicle-reserved-color: var(--warning-color);
	--on-vehicle-reserved-color: var(--on-warning-color);
	--vehicle-out-of-service-color: var(--error-color);
	--on-vehicle-out-of-service-color: var(--on-error-color);
	--vehicle-hidden-color: var(--disabled-text-color);
	--on-vehicle-hidden-color: var(--on-disabled-text-color);
	--vehicle-off-hours-color: var(--primary-text-color);
	--on-vehicle-off-hours-color: var(--on-primary-text-color);

	--dark-channel-rgb-parts-color: 0, 0, 0;
	--light-channel-rgb-parts-color: 255, 255, 255;

	--elevation-0-color: white;
	--on-elevation-0-color: var(--on-surface-color);
	--elevation-1-color: white;
	--on-elevation-1-color: var(--on-surface-color);
	--elevation-2-color: white;
	--on-elevation-2-color: var(--on-surface-color);
	--elevation-3-color: white;
	--on-elevation-3-color: var(--on-surface-color);
	--elevation-4-color: white;
	--on-elevation-4-color: var(--on-surface-color);
	--elevation-5-color: white;
	--on-elevation-5-color: var(--on-surface-color);

	--vehicle-marker-inset-color: white;

	--paper-toast-background-color: var(--secondary-color, var(--application-color));
	--paper-toast-color: var(--on-secondary-color, var(--on-application-color));

	/* Vaadin date picker label color */
	--material-secondary-text-color: rgba(0, 0, 0, 0.65);

	/*************/
	/* Overrides */
	/*************/

	--paper-dialog-background-color: var(--surface-color);
	--paper-listbox-background-color: var(--surface-color);
	--paper-listbox-color: var(--primary-text-color, #757575);
	--material-body-text-color: var(--primary-text-color);
	--material-background-color: var(--surface-color);
	--on-loading-overlay-color: var(--primary-text-color);
	--material-divider-color: var(--primary-border-color);
	--light-theme-secondary-background-color: var(--primary-hover-color);

	/* Text field corrections */
	--_material-text-field-input-line-background-color: var(--paper-input-container-color, var(--secondary-text-color));
	--_material-text-field-input-line-opacity: 1;

	/****************/
	/* Other params */
	/****************/

	--block-border-radius: 0px;
	--button-border-radius: 0px;
	--primary-border-radius: 5px;
	--font: "Roboto";
}

html {
	height: 100vh;
}

body {
	--paper-font-common-base_-_font-family: var(--font), "Roboto", "Noto", sans-serif;
	--paper-input-container-shared-input-style_-_font-family: var(--paper-font-common-base_-_font-family);
	--paper-font-subhead_-_font-family: var(--paper-font-common-base_-_font-family);
	--material-font-family: var(--paper-font-common-base_-_font-family);

	padding: 0;
	margin: 0;
	background: var(--primary-background-color);
	font-size: 0.9em;
	position: fixed;
	height: 100%;
	width: 100%;
	font-family: var(--paper-font-common-base_-_font-family);
}

.loading-screen {
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 24px;
	color: rgba(0, 0, 0, .87);
	text-align: center;
	background: var(--loading-screen-color);
}

.loading-screen img {
	max-height: 30vh;
}

.loading-screen svg {
	--primary-color: var(--application-color);

	height: 30vh;
	max-width: 80vw;
}

.button-regardless {
	border: 2px solid rgb(0, 147, 178);
	display: inline-block;
	padding: 7px 13px;
	cursor: pointer;
}

.button-regardless:hover {
	background-color: rgb(0, 147, 178);
	color: white;
}

.paragraph {
	margin-bottom: 20px;
}

@media screen and (max-width: 1000px) {
	body {
		font-size: 0.9rem;
	}

	.loading-screen img {
		max-height: initial;
		max-width: 80vw;
	}
}

@media screen and (max-width: 500px) {
	body {
		overflow: auto;
		overflow-x: hidden;
	}
}