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

body {
	background-image: url('/assets/ai-demo-2/images/blurry-nebula.jpg');
	opacity: 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.monospace {
	font-family: "Martian Mono", monospace !important;
}

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

.chart-wrapper {
	/* background-color: rgba(33, 212, 190, .2); */
	position: relative;
	width: 100%;
	height: 100%;
	
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 12px !important;
}

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

}

.metrics-wrapper {
	/* background-color: rgba(33, 212, 190, .2); */
	position: relative;
	width: 100%;
	height: 100%;
}

.metrics-container {
	position: absolute;
	inset: 0;
	height: 100%;
}

.metrics-box {
	display: flex !important;
	height: 100%;
}

.active-operation {
    width: 270px;
    font-weight: 600;
    font-size: .9rem;
}

.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;
}

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

.site-row-1 {
	flex-grow: 4;
	/* background-color: brown; */
}

.site-row-2 {
	flex-grow: 7;
}

.spinner-container {
	background-image: url('/assets/ai-demo-2/images/ai-spinner-2.svg');
	opacity: 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

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

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

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

.chart-card {
	width: 100%;
	height: 100%;
	/* optional outer shadow */
	/* box-shadow: 0 8px 24px rgba(0,0,0,.25); */
}

.active-state {
	opacity: .4;
}

.active-state.active {
	opacity: 1;
}

/* 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 {
	animation: pulse 2.5s infinite ease-in-out;
	transform-origin: center;
	fill: #E9A00D;
}

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


.device-icon-bounce2 path,
.device-icon-bounce2 ellipse {
	fill: #458299;
}

.active .device-icon-bounce2 path,
.active .device-icon-bounce2 ellipse {
	animation: pulse2 4.5s infinite ease-in-out;
	transform-origin: center;
	fill: #E9A00D;
}

path.device-icon-highlight {
	fill: #87DEF3;
}

svg.active path.device-icon-highlight  {
	fill: #E9A00D;
}


svg.active-state .indicator-active,
g.active-state .indicator-active {
  display: none;
}
svg.active-state .indicator-inactive,
g.active-state .indicator-inactive {
  display: block;
}

svg.active-state.active .indicator-active,
g.active-state.active .indicator-active {
  display: block;
}
svg.active-state.active .indicator-inactive,
g.active-state.active .indicator-inactive {
  display: none;
}

@keyframes pulse {

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

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


@keyframes pulse2 {

	0%,
	100% {
		transform: scale(1) translate(0, 0);
	}

	50% {
		transform: scale(1.15) translate(4px, 4px);
	}
}

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