html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	transition: background-color 0.3s, color 0.3s;
	font-family: "Tomorrow", sans-serif;
}

.monospace {
	font-family: "Source Code Pro", monospace !important;
}

.bg-primary {
	background-color: #11355e !important;
}

.header-logo {
	height: 60px;
	padding: 4px 2px 4px 10px;
}

.header-text {
	font-weight: 500;
	font-size: 1.8rem;
	font-variant: small-caps;
}

.fixed-row {
	height: 140px;
}

.chart-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.chart-container {
	position: absolute;
	inset: 0;
}

.theme-dark {
	background-color: #121212 !important;
	color: #f0f0f0 !important;
}

	.theme-dark .border {
		border-color: #333 !important;
	}

	.theme-dark .tiny-column {
		background-color: #1f1f1f;
		color: #aaa;
	}

.theme-toggle-btn {
	position: absolute;
	top: 8px;
	right: 16px;
	font-size: 1.2rem;
	color: #fff;
	background: transparent;
	border: none;
}

.custom-row-2 {
	flex-grow: 5;
}

.custom-row-3 {
	flex-grow: 6;
}

.col-overlay-container {
	position: relative;
}

.col-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
}

	.col-overlay.hidden {
		display: none;
	}


/* SVG DEVICE MODULES */
.svg-theme.light {
	--svg-bg: #648c9a;
	--svg-box-fill: #d4d4d4;
	--svg-box-stroke: #38A9D3;
	--svg-inner-fill: #649ab0;
	--svg-inner-fill-lg: #568ea3;
	--svg-label-color: black;
	--svg-text: black;
	--svg-label: black;
	--svg-container-fill: #245060;
}

.svg-theme.dark {
	--svg-bg: #233756;
	--svg-box-fill: black;
	--svg-box-stroke: #38A9D3;
	--svg-inner-fill: #00354A;
	--svg-inner-fill-lg: #006A92;
	--svg-label-color: white;
	--svg-text: white;
	--svg-label: white;
	--svg-container-fill: #0a2229;
	--svg-container-fill-active: #38A9D3;
}

.svg-theme svg .background {
	fill: var(--svg-bg);
}

.svg-theme svg .device-box {
	fill: var(--svg-box-fill);
	stroke: var(--svg-box-stroke);
}

.svg-theme svg .device-inner-lg {
	fill: var(--svg-inner-fill-lg);
}

.svg-theme svg .device-inner {
	fill: var(--svg-inner-fill);
}

.svg-theme svg text {
	fill: var(--svg-text);
}

.svg-theme svg .container-fill {
	fill: var(--svg-container-fill);
	stroke: var(--svg-container-fill);
}

.svg-theme svg.active .container-fill {
	fill: var(--svg-container-fill-active);
	stroke: var(--svg-container-fill-active);
}

.device-icon-bounce.active path {
	animation: pulse 2.5s infinite ease-in-out;
	transform-origin: center;
	fill: #E9A00D;
}

svg.active svg .device-icon-bounce {
	animation: pulse 2.5s infinite ease-in-out;
	transform-origin: center;
	fill: #E9A00D;
}

	svg.active svg.device-icon-bounce path {
		animation: pulse 2.5s infinite ease-in-out;
		transform-origin: center;
		fill: #E9A00D;
	}

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

	50% {
		transform: scale(1.2);
	}
}

svg.active .device-icon-rotate {
	transform-origin: center;
	animation: icon-rotate 12s linear infinite;
	animation-fill-mode: forwards;
}

@keyframes icon-rotate {
	from {
		transform-origin: center;
		transform: rotate(0)
	}

	to {
		transform-origin: center;
		transform: rotate(360deg)
	}
}




.charge .battery-border {
	fill: url(#animationCharge);
}

.discharge .battery-border {
	fill: url(#animationDischarge);
}

.active .battery-border {
	fill: #87DEF3;
}

.normal .battery-stack {
	fill: #87DEF3;
}

.warning .battery-stack {
	fill: #E4C71B;
}

.danger .battery-stack {
	fill: #CA3131;
}