:root {
	--application-color: #8BC34A;
	--on-application-color: white;

	--application-color-light: #9bd15c;
	--on-application-color-light: black;

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

	--secondary-color: #4285f4;
	--on-secondary-color: white;


	/****************/
	/* State colors */
	/****************/

	--info-color: #3498db;
	--on-info-color: #fff;

	--success-color: #78c464;
	--on-success-color: white;

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

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

	--charging-color: #ffd327;
	--on-charging-color: #202124;


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

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

	--light-text-color: rgba(0, 0, 0, .60);
	--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;

	--primary-border-color: #c7c7c7;
	--primary-background-color: #efefef;
	--dark-text-color: #202124;


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

	--background-color-1: #eaeaea;
	--background-color-2: #efefef;
	--background-color-3: #f9f9f9;
	--on-background-color: #333;

	--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);

	/* Location not available */
	--not-available-color-1: var(--primary-text-color);
	--on-not-available-color-1: var(--on-primary-text-color);
	--not-available-color-2: var(--light-text-color);
	--on-not-available-color-2: var(--on-light-text-color);

	--note-color: #f5f5f5;
	--on-note-color: var(--light-text-color);

	--disabled-button-color: var(--primary-background-color);
	--on-disabled-button-color: var(--light-text-color);

	--selector-selected-color: var(--application-color-light);
	--on-selector-selected-color: var(--on-application-color-light);

	/* Used for all those background: rgba(0,0,0, 0.*) undertones */
	--dark-channel-rgb-parts-color: 0, 0, 0;
	--light-channel-rgb-parts-color: 255, 255, 255;

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


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

	--paper-dialog-background-color: var(--surface-color);
	--paper-listbox-background-color: var(--surface-color);
	--paper-listbox-color: var(--light-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 */
	/****************/

	--primary-border-radius: 5px; /*Currently used only by a diamond-switch-selector...*/
	--button-border-radius: 3px;
	--block-border-radius: 5px;
	--dialog-border-radius: 5px;

	--font: "Roboto";
}

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);

	position: fixed;
	top: 0;
	left: 0;
	height: 100dvh;
	width: 100%;
	margin: 0;
	font-family: var(--paper-font-common-base_-_font-family);
	line-height: 1.5;
}

@keyframes indeterminate {
	0% {
		left: -35%;
		right: 100%
	}
	60% {
		left: 100%;
		right: -90%
	}
	100% {
		left: 100%;
		right: -90%
	}
}

@keyframes indeterminate-short {
	0% {
		left: -200%;
		right: 100%
	}
	60% {
		left: 107%;
		right: -8%
	}
	100% {
		left: 107%;
		right: -8%
	}
}

.background {
	height: 100vh;
	display: flex;
	position: fixed;
	width: 100vw;
	overflow: hidden;
	background-color: var(--background-color-1);
}

.shade-1,
.shade-2 {
	position: absolute;
	width: 150%;
}

.shade-1 {
	top: -29vh;
	height: 75%;
	background-color: var(--background-color-2);
	transform: rotate(21deg);
	z-index: -2;
}

.shade-2 {
	bottom: -50vh;
	height: 75%;
	background-color: var(--background-color-3);
	transform: rotate(-24deg);
	z-index: -1;
}

.shade-1 .track::before,
.shade-2 .track::before,
.shade-1 .track::after,
.shade-2 .track::after {
	content: "";
	position: absolute;
	height: 3px;
	left: 0;
	bottom: 0;
	background: var(--application-color);
	will-change: left, right;
}


.shade-1 .track::before,
.shade-2 .track::before {
	animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.shade-1 .track::after,
.shade-2 .track::after {
	animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
	animation-delay: 2.15s;
}

.shade-2 .track::before,
.shade-2 .track::after {
	top: 0;
	bottom: unset;
	animation-direction: reverse;
}

.shade-2 .track::before {
	animation-delay: 0.3s;
}

.shade-2 .track::after {
	animation-delay: 0.3s;
}

.background svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.5);
}

.background svg,
.background .track {
	opacity: 1;
	transition: opacity 0.2s;
}

.background.loaded .track,
.background.loaded svg {
	opacity: 0;
	pointer-events: none;
}