:root {
	--nav-width: 320px;
	/* Solteq Bedrock */
	--color-primary-50: 100, 18%, 97%;
	--color-primary-100: 100, 16%, 93%;
	--color-primary-200: 100, 16%, 85%;
	--color-primary-300: 106, 15%, 73%;
	--color-primary-400: 103, 13%, 58%;
	--color-primary-500: 105, 14%, 44%;
	--color-primary-600: 104, 15%, 36%;
	--color-primary-700: 106, 14%, 29%;
	--color-primary-800: 108, 12%, 24%;
	--color-primary-900: 106, 13%, 20%;

	/* Solteq Matcha */
	--color-secondary-50: 103, 41%, 97%;
	--color-secondary-100: 107, 47%, 93%;
	--color-secondary-200: 107, 46%, 81%;
	--color-secondary-300: 107, 45%, 73%;
	--color-secondary-400: 107, 40%, 58%;
	--color-secondary-500: 108, 41%, 45%;
	--color-secondary-600: 108, 45%, 36%;
	--color-secondary-700: 109, 42%, 29%;
	--color-secondary-800: 109, 38%, 24%;
	--color-secondary-900: 110, 36%, 20%;

	--color-gray-50: 0, 0%, 98%;
	--color-gray-100: 240, 4.8%, 95.9%;
	--color-gray-200: 240, 5.9%, 90%;
	--color-gray-300: 240, 4.9%, 83.9%;
	--color-gray-400: 240, 5%, 64.9%;
	--color-gray-500: 240, 3.8%, 46.1%;
	--color-gray-600: 240, 5.2%, 33.9%;
	--color-gray-700: 240, 5.3%, 26.1%;
	--color-gray-800: 240, 3.7%, 15.9%;
	--color-gray-900: 240, 5.9%, 10%;
	--solteq-black: #14181E;

	--color-blue-50: 214, 100%, 96.9%;
	--color-blue-100: 214, 94.6%, 92.7%;
	--color-blue-200: 213, 96.9%, 87.3%;
	--color-blue-300: 212, 96.4%, 78.4%;
	--color-blue-400: 213, 93.9%, 67.8%;
	--color-blue-500: 217, 91.2%, 59.8%;
	--color-blue-600: 221, 83.2%, 53.3%;
	--color-blue-700: 224, 76.3%, 48%;
	--color-blue-800: 226, 70.7%, 40.2%;
	--color-blue-900: 224, 64.3%, 32.9%;

	--color-green-50: 138, 76.5%, 96.7%;
	--color-green-100: 141, 84.2%, 92.5%;
	--color-green-200: 141, 78.9%, 85.1%;
	--color-green-300: 142, 76.6%, 73.1%;
	--color-green-400: 142, 69.2%, 58%;
	--color-green-500: 142, 70.6%, 45.3%;
	--color-green-600: 142, 76.2%, 36.3%;
	--color-green-700: 142, 71.8%, 29.2%;
	--color-green-800: 143, 64.2%, 24.1%;
	--color-green-900: 144, 61.2%, 20.2%;

	--color-yellow-50: 55, 91.7%, 95.3%;
	--color-yellow-100: 55, 96.7%, 88%;
	--color-yellow-200: 53, 98.3%, 76.9%;
	--color-yellow-300: 50, 97.8%, 63.5%;
	--color-yellow-400: 48, 95.8%, 53.1%;
	--color-yellow-500: 45, 93.4%, 47.5%;
	--color-yellow-600: 41, 96.1%, 40.4%;
	--color-yellow-700: 35, 91.7%, 32.9%;
	--color-yellow-800: 32, 81%, 28.8%;
	--color-yellow-900: 28, 72.5%, 25.7%;

	--color-red-50: 0, 85.7%, 97.3%;
	--color-red-100: 0, 93.3%, 94.1%;
	--color-red-200: 0, 96.3%, 89.4%;
	--color-red-300: 0, 93.5%, 81.8%;
	--color-red-400: 0, 90.6%, 70.8%;
	--color-red-500: 0, 84.2%, 60.2%;
	--color-red-600: 0, 72.2%, 50.6%;
	--color-red-700: 0, 73.7%, 41.8%;
	--color-red-800: 0, 70%, 35.3%;
	--color-red-900: 0, 62.8%, 30.6%;
}

html, body {
	height: 100%;
}

.header-logo {
	background-size: contain;
	background-repeat: no-repeat;
	height: 60px;
	width: 250px;
}

#enerity-layout {
	min-height: 100%;
	display: grid;
	grid-template-areas:
		"header header"
		"nav main"
		"footer footer";
	grid-template-rows: auto 1fr auto;
	grid-template-columns: auto 1fr;
}

#enerity-header {
	grid-area: header;
}

#enerity-nav {
	grid-area: nav;
}

#enerity-main {
	grid-area: main;
}

#enerity-footer {
	grid-area: footer;
}

.dt-buttons > button {
	margin-right: 0.5rem;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url("./webfonts/Inter-Thin.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-Thin.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100;
	font-display: swap;
	src: url("./webfonts/Inter-ThinItalic.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-ThinItalic.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url("./webfonts/Inter-ExtraLight.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-ExtraLight.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 200;
	font-display: swap;
	src: url("./webfonts/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-ExtraLightItalic.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("./webfonts/Inter-Light.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-Light.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("./webfonts/Inter-LightItalic.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-LightItalic.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("./webfonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-Regular.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("./webfonts/Inter-Italic.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-Italic.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("./webfonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-Medium.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url("./webfonts/Inter-MediumItalic.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-MediumItalic.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("./webfonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-SemiBold.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url("./webfonts/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("./webfonts/Inter-Bold.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-Bold.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("./webfonts/Inter-BoldItalic.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-BoldItalic.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("./webfonts/Inter-ExtraBold.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-ExtraBold.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 800;
	font-display: swap;
	src: url("./webfonts/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("./webfonts/Inter-Black.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-Black.woff?v=3.19") format("woff");
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 900;
	font-display: swap;
	src: url("./webfonts/Inter-BlackItalic.woff2?v=3.19") format("woff2"), url("./webfonts/Inter-BlackItalic.woff?v=3.19") format("woff");
}

/* -------------------------------------------------------
Variable font.
Usage:

  html { font-family: 'Inter', sans-serif; }
  @supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
  }
*/
@font-face {
	font-family: 'Inter var';
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
	font-named-instance: 'Regular';
	src: url("./webfonts/Inter-roman.var.woff2?v=3.19") format("woff2");
}

@font-face {
	font-family: 'Inter var';
	font-weight: 100 900;
	font-display: swap;
	font-style: italic;
	font-named-instance: 'Italic';
	src: url("./webfonts/Inter-italic.var.woff2?v=3.19") format("woff2");
}


/* --------------------------------------------------------------------------
[EXPERIMENTAL] Multi-axis, single variable font.

Slant axis is not yet widely supported (as of February 2019) and thus this
multi-axis single variable font is opt-in rather than the default.

When using this, you will probably need to set font-variation-settings
explicitly, e.g.

  * { font-variation-settings: "slnt" 0deg }
  .italic { font-variation-settings: "slnt" 10deg }

*/
@font-face {
	font-family: 'Inter var experimental';
	font-weight: 100 900;
	font-display: swap;
	font-style: oblique 0deg 10deg;
	src: url("./webfonts/Inter.var.woff2?v=3.19") format("woff2");
}


/* Spinners */

.dot-wave {
	--uib-color: hsl(var(--color-gray-800));
	--uib-size: 47px;
	--uib-speed: 1s;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	width: var(--uib-size);
	height: calc(var(--uib-size) * 0.17);
	padding-top: calc(var(--uib-size) * 0.34);
}

.dot-wave__dot {
	flex-shrink: 0;
	width: calc(var(--uib-size) * 0.17);
	height: calc(var(--uib-size) * 0.17);
	border-radius: 50%;
	background-color: var(--uib-color);
	will-change: transform;
}

	.dot-wave__dot:nth-child(1) {
		animation: jump var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.45) infinite;
	}

	.dot-wave__dot:nth-child(2) {
		animation: jump var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.3) infinite;
	}

	.dot-wave__dot:nth-child(3) {
		animation: jump var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.15) infinite;
	}

	.dot-wave__dot:nth-child(4) {
		animation: jump var(--uib-speed) ease-in-out infinite;
	}

@keyframes jump {
	0%, 100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-200%);
	}
}

.ring-spinner {
	--uib-speed: 2s;
	vertical-align: middle;
	transform-origin: center;
	animation: rotate var(--uib-speed) linear infinite;
}

	.ring-spinner circle {
		fill: none;
		stroke: currentColor;
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
		stroke-linecap: round;
		animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
	}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes stretch {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 90, 200;
		stroke-dashoffset: -35px;
	}

	100% {
		stroke-dashoffset: -124px;
	}
}